多选

  div()
    div()
      p 选择平台
        el-form-item()
          el-checkbox( label="全部", :indeterminate="isIndeterminate", v-model="checkAll", @change="handleCheckAllChange")
      div()
        el-form-item
                                  el-checkbox-group( v-model="popupform.receivers", @change="handleCheckedCitiesChange")
                                        el-checkbox( v-for="city in cities", :label="city.id", :key="city.id") {{city.name}}
 
 
  return {
            cities: [],
            checkAll: false,
            isIndeterminate: true,

            popupform: {
     receivers: [],
    }
  }
  
 mounted() {
        this.getDataList();
    },
    methods: {
        handleCheckAllChange(val) {
            // const _receivers = val ? this.cities.map(key => key.id) : [];
            // this.$set(this.popupform, 'receivers', _receivers)
    //绑定的值为 id ,则 this.cities.map(key => key.id)  为 id 
            this.popupform.receivers = val ? this.cities.map(key => key.id) : [];
            console.log(this.cities.map(key => key.id))
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
   // value 是 :label="city.id" 绑定的值
            const checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        async getDataList() {
    //请求数据
            const result = await api.accountRangeList();
            this.cities = result.sellerTypeList;
        }
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
原文地址:https://www.cnblogs.com/J-Luck/p/13361522.html