背景：

最新项目中需要学习前端vue框架，进行一些页面的编写，在遇到多选框的时候研究了。
需要实现的样式

需要在上面选择品牌和版本的选择的时候动态变换机型。

问题

第一步是不理接里面的参数含义，大量时间去摸索。

<template>
  <div>
    <div :style="{ borderBottom: '1px solid #E9E9E9' }">
      <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
        Check all
      </a-checkbox>
    </div>
    <br />
    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
  </div>
</template>
<script>
const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];
export default {
  data() {
    return {
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      plainOptions,
    };
  },
  methods: {
    onChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
  },
};
</script>

这边贴一段官方代码块，我们来解释下里面所用到的参数含义

template>
  <div>
    <div :style="{ borderBottom: '1px solid #E9E9E9' }">   这边是下划线
      <a-checkbox :indeterminate="indeterminate" :checked="checkAll"   @change="onCheckAllChange">   全选按钮
        Check all
      </a-checkbox>
    </div>
    <br />
    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
  </div>
</template>
<script>
const plainOptions = ['Apple', 'Pear', 'Orange'];    这边的参数是你可以展示的选择框按钮
const defaultCheckedList = ['Apple', 'Orange'];  这边展示的是默认选中的参数
export default {
  data() {
    return {
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      plainOptions,
    };
  },
  methods: {
    onChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
  },
};
</script>

在说明下里面的checkedList这个参数很很重要，他存的是绑定的参数，即你最后需要返回个后台的参数。
两个方法 onChange 为当你勾选框来进行判定是否已经全部选择还是其他可能来展示不同的样式
onCheckAllChange方法即为全选和不选。

进阶版研究

上边是简单的选择，当我们后台返回的是一个实体类的list集合，多个list，那么我们的选择和代码应该如何编写呢。

这边我们就需要对 return中的

plainOptions: [
        {
          label: '',
          value: ''
        }
      ]

这样进行改造，指定名字和值

 equipmentlist () {
      return jmctAPI.list2({ brands: this.checkedList1, versions: this.checkedList2, dpis: this.checkedList3 }).then(res => {
        if (res.success) {
          this.plainOptions = []
          for (var i in res.data.equipmentList) {
            this.plainOptions4.push({ label: res.data.equipmentList[i].name, value: res.data.equipmentList[i].ipAddress })
            this.checkedList = []
            this.checkAll = false
          }
        }
      })
    },

这个代码含义就是通过上面的参数选择，动态回显机型值。

问题

但是当我们全选和不选的时候就会出现问题，应为我们之前的赋值给checkedList ，但是plainOptions里面是一个对象，就会报错。
所有我们需要换种写法

onCheckAllChange4 (e) {
      Object.assign(this, {
      //  checkedList: e.target.checked ? this.plainOptions4 : [],
        indeterminate: false,
        checkAll: e.target.checked
      })
      if (e.target.checked) {
        for (var i in this.plainOptions4) {
          this.checkedList.push(this.plainOptions4[i].value)
        }
      } else {
        this.checkedList = []
      }
    }

循环添加就行，勾选效果对应状态就行。

多个list返回处理

<a-card v-for="(item, index) in lsecuritysettingdata" :key="item.iid">
          <div>
            <div :style="{ borderBottom: '1px solid #E9E9E9' }">
              <p class="spec" >{{ item.categoryName }}</p>
              <a-checkbox :indeterminate="indeterminate" :checked="checkAll" style="margin-left: 20px" @change="onCheckAllChange" >
                全选
              </a-checkbox>
            </div>
            <br />
            <a-checkbox-group v-model='checkedList' :options="plainOptions[index]" @change="onChange(index)" />
          </div>
        </a-card>

遍历返回的list

return jmctAPI.securitylist({ type: '1' }).then(res => {
      if (res.success) {
        this.lsecuritysettingdata = res.data
        for (var i in res.data) {
          var len = res.data[i].list.length
          var plainOptions1 = []
          for (var j = 0; j < len; j++) {
            plainOptions1.push(res.data[i].list[j].name)
          }
          this.plainOptions.push(plainOptions1)
        }
        // console.log(res.data['1'].list[0].name)
      }
    })

我们这里就会定义一个shuzplainOptions，里面包含多个数组。通过数组下标进行获取。:options="plainOptions[index]

总结：基本上功能都能实现，但是样式还是没有学会如何去调整，默认是正方形框。有用的点个关注，创造不易，谢谢。