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>