控制checkbox最多只能选两个，限制选择个数（函数实现）

分为几种情况

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="item.checked"                 
                  @change="isChecked"
                  :disabled="item.disabled" />
</template>

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

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

    },

    }
</script>