el-checkbox实现全选与单选

实现目的：实现全选与多选，点击确定的时候获取每个值的id传给后台

1、HTML

<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox v-for="(city,i) in cities" :label="city.uuid" :key="i" v-model="city.relation"
   @change="handleCheckedCitiesChange">{{city.customerName}}</el-checkbox>
                    
<span slot="footer" class="dialog-footer">
   <el-button type="primary" :disabled="disabled" @click="classifyConfirm">确定</el-button>
   <el-button type="primary" @click="calceConfirn">取消</el-button>
</span>

2、data

 data: function () {
    return { 3         checkAll: false,
        cities: [], //数据源
 5　　　}
 6　}
　　　　　　

3、js

handleCheckAllChange(val) {
   if (this.checkAll) {
       this.cities.forEach(item => {
            item.relation = true   //只改变数据的状态
         })
     } else {
      this.cities.forEach(item => {
          item.relation = false
            })
          }
      },
handleCheckedCitiesChange() {
  console.log(this.checkedCities);
  if (this.checkedCities.length == this.cities.length) {
  this.checkAll = true
    } else {
      this.checkAll = false
   }
},

//确认
            classifyConfirm() {
                var checkedAll = [];
                this.cities.forEach(item => {
                    if(item.relation == true){
                        checkedAll.push(item.uuid)   //确认的时候取状态为true的值，并把要用的字段取出来
                    }
                })
                // var checkedAll = [...new Set(this.checkedCities)] //数组去重
                var that = this;
                var data = {
                    "customerUuid":that.customerUuid,
                    "projectCustomerUuid":checkedAll.join(',')
                };
                console.log(checkedAll)
                this.classLoading = true;
                $.ajax({
                    url: Domain + '/xxxxx',
                    dataType: "json",
                    method: "POST",
                    // contentType: "application/json; charset=utf-8",
                    data:data,
                    success: function (ret) {
                        if (ret.retStatus == "1") {
                            that.$message({
                                type: 'success',
                                message: '保存成功!'
                            });
                            that.classLoading = false;32                         }
                    }
                })
            },

最开始在改变状态的时候就想着取id了，导致后面一系列的问题，后面经过大佬的提醒，在最开始的时候不要取值，只改变状态就行，最后提交的时候遍历数组,然后把每一项里面为true的取出来就可以了，很简单就解决了

或者html 这样写也可以：

<el-checkbox :indeterminate="roleIsIndeterminate" v-model="roleCheckAll" @change="handleRoleAllChange" :disabled="isAllChecked || onlyAllDisabled">全选</el-checkbox>
<el-checkbox-group v-model="checkedRoles" @change="handleCheckedRolesChange">
<el-checkbox v-for="role in roleList" :label="role.id" :key="role.id" :disabled="role.disabled">{{role.name}}</el-checkbox>
</el-checkbox-group>