element 三级复选框

<template>
    <div>
        
        <div>
        <el-table
          :data="tableData"
          border
          style=" 100%"
          ref="multipleTable"
          >
          <el-table-column
            prop=""
            label="3"
            width="180">
                <template slot-scope="scope">
                    <el-checkbox :indeterminate="scope.row.first.isIndeterminate" v-model="scope.row.first.checkAll" 
                    @change="handleCheckAllFirstChange(scope.row.first.checkAll,scope)">
                        {{scope.row.first.sheng}}
                    </el-checkbox>
                </template>    
          </el-table-column>
          <el-table-column
            label="1"
            width="180">
                <template slot-scope="scope">
                    <el-checkbox :indeterminate="scope.row.second.isIndeterminate" v-model="scope.row.second.checkAll" 
                    @change="handleCheckSecondAllChange(scope.row.second.checkAll,scope)">
                        {{scope.row.second.name}}
                    </el-checkbox>
                </template>    
          </el-table-column>
          <el-table-column
            label="2"
            width="">
            <template slot-scope="scope">
                <div>
                    <el-checkbox-group v-model="scope.row.second.checkedCities" 
                    @change="handleCheckedCitiesChange(scope.row.second.checkedCities,scope)">
                          <el-checkbox v-for="city in scope.row.second.date" :label="city" :key="city">
                            {{city}}
                          </el-checkbox>
                    </el-checkbox-group>
                </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
                <el-button @click="aaa(scope)">提交</el-button>
            </template>
          </el-table-column>
        </el-table>
        </div>
        
    </div>

    
</template>

<script>
     const cityOptions = ['上海', '北京', '广州', '深圳'];
      export default {
        data() {
          return {
            checkAll: false,
            checkedCities: ['上海', '北京'],
            cities: cityOptions,
            isIndeterminate: true,
            // ==================================
            tableData: [
            {
                first:{ sheng:'省', checkAll:false, isIndeterminate: true, },
                second:{
                    date: ['上海', '北京', '广州', '深圳'],
                    name: '市',
                    address: '上海市普陀区金沙江路 1518 弄',
                    checkedCities:['上海', '北京',],
                    checkAll: false,
                    isIndeterminate: true,
                }
            },
            {
              first:{ sheng:'省1', checkAll:false, isIndeterminate: true, },
              second:{
                date: ['上海1', '北京1', '广州1', '深圳1'],
                name: '市1',
                address: '上海市普陀区金沙江路 1518 弄',
                checkedCities:[],
                checkAll: false,
                isIndeterminate: true,  
              }
            },
            {
              first:{ sheng:'省1', checkAll:false, isIndeterminate: true,},
              second:{
                date: ['上海2', '北京2', '广州2', '深圳2'],
                name: '市2',
                address: '上海市普陀区金沙江路 1518 弄',
                checkedCities:['北京2', '深圳2'],
                checkAll: false,
                isIndeterminate: true,    
             }
            }],
          }
        },
        created() {
            for(let i=0;i<this.tableData.length;i++){
                if(this.tableData[i].second.checkedCities.length == 0){
                    this.tableData[i].second.isIndeterminate = false;
                    this.tableData[i].first.isIndeterminate = false;
                }
            }
        },
        methods: {
            // 一级复选框
          handleCheckAllFirstChange(val,scope) {
            if(val){
                scope.row.second.checkAll = true;
                scope.row.second.isIndeterminate = false;
                scope.row.second.checkedCities = val ?  scope.row.second.date : [];
            }else{
                scope.row.second.checkAll = false;
                scope.row.second.checkedCities = val ?  scope.row.second.date : [];
            }            
            scope.row.first.isIndeterminate = false;
          },
          // 二级复选框
          handleCheckSecondAllChange(val,scope) {
            scope.row.first.checkAll = val;
            if(!val){
                scope.row.first.isIndeterminate = false;
            }else{
                scope.row.first.checkAll = true;
                scope.row.first.isIndeterminate = false;
            }
            scope.row.second.checkedCities = val ?  scope.row.second.date : [];
            scope.row.second.isIndeterminate = false;
          },
          // 三级复选框
          handleCheckedCitiesChange(value,scope) {
            let checkedCount = value.length;
            scope.row.first.checkAll = scope.row.second.checkAll = checkedCount === scope.row.second.date.length;
            scope.row.first.isIndeterminate = scope.row.second.isIndeterminate = checkedCount > 0 && checkedCount < scope.row.second.date.length;
          },
          aaa(scope){
              console.log(scope.row)
              console.log(scope.row.second.checkedCities)
          }    
        }
      };
</script>



<style>
    .haha{
        display: flex;
        
    }
</style>