控制checkbox最多只能选两个,限制选择个数(函数实现)

时间:2025-01-19 17:06:40

分为几种情况

1.最多选两个,选择两个后checkbox禁用,取消已选两个中的某一个checkbox继续使用

2.没有选择的情况下点击全选默认选中第一个第二个

3.已经选了一个的情况下点击全选默认增加第一个进入被选,如果正好已选择的是第一项就默认增加第二个进入被选

4.当选够两个的时候全选框被选中,取消其中一个或者全部取消的时候全选框也被取消

<template>
     //全选框
     <el-checkbox style="text-align: center;" v-model="checkAll" 
                  @change="checkedAll" :max="max" />
     //单选框
     <el-checkbox style="text-align: center;" v-model=""                 
                  @change="isChecked"
                  :disabled="" />
</template>

<script>
    data() {
      return {
        checkAll: false,
      }
    },
    methods: {
      //下面代码中出现的tableData是借口拿回来的数据 可以根据自己的数据改
      checkedAll() {
        let flag = 0
        (item => {
          if () flag++
        });
        //没有的情况下 默认选择前两个
        if (flag === 0) {
          [0].checked = 
          [1].checked = 
        }
        //已经有一个的情况下 点击全选默认再加第一个 如果第一个已经选了就顺延默认再加第二个
        else if (flag === 1) {
          if ([0].checked) {
            [1].checked = 
          } else {
            [0].checked = 
          }
        }
        //取消全选的时候全部取消
        else {
          (item => {
             = false
          });
        }
      ()
     },

     isChecked() {
      ///全选被手动一个个选中触发后,按钮也被触发
      let flag = 0
      (item => {
        if () flag++
      });
      if (flag === 2) {
         = true
      } else {
         = false
      }
      let arr = []
      (item => {
        if () {
          (item)
        }
      })
      //超过两个禁用checkbox  
      if ( >= 2) {
        this.$message({
          message: '最多只能选择两个应用哦~',
          type: 'warning'
        });
        (item => {
          if (!) {
             = true
          }
        })
      } else {
        (item => {
          if (!) {
             = false
          }
        })
      }
      if ( <= 2) {
        if ( === 0) {
          this.$('global/tableSelect', null)
        }
        else {
          this.$('global/tableSelect', arr)
        }
      }

    },

    }
</script>