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 {         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;                         }
                     }
                 })
             },

最开始在改变状态的时候就想着取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>