element ui el-table嵌套el-table,实现checkbox联动效果

HTML代码：

        <el-table  header-row-class-name="my-el-table-header" row-class-name="my-el-table-body"  ref="multipleGroupTable" :data="vehicleGroupTableData" tooltip-effect="dark" style="width: 100%" v-loading="loading" @select="handleSelectionGroupChange" @select-all="handleSelectionGroupChange"  ><el-table-column type="selection" width="55"  ></el-table-column> <el-table-column label="AA" width="200"><template slot-scope="scope">{{ scope.row.groupName }}</template></el-table-column>    <el-table-column  label="BB" ><template slot-scope="scope">{{ scope.row.vehicles.length }}Vehicles</template></el-table-column><el-table-column label="" width="200" show-overflow-tooltip> <template slot-scope="scope"><el-link type="primary" style="color:#2764B0" :underline="false">View </el-link></template></el-table-column><el-table-column type="expand"> <template slot-scope="scope"> <div class="el-table-expand-table"><el-table :key="scope.$index" header-row-class-name="my-el-table-header" row-class-name="my-el-table-body" key="0" ref="multipleTable" :data="scope.row.vehicles" tooltip-effect="dark" style="width: 100%"><el-table-column label="" width="70"><template slot-scope="scope"><el-checkbox  :key="'checkbox-' +scope.$index + scope.row.vin"  @change="(val) => handleNestedCheckboxChange(val, scope.row,scope.$index)" :value="scope.row.isChecked" ></el-checkbox></template></el-table-column><el-table-column label="Nickname" min-width="16%"><template slot-scope="scope"> {{ scope.row.nickName }}</template></el-table-column><el-table-column  label="aa" min-width="16%"><template slot-scope="scope">{{ scope.row.vin }}</template></el-table-column> <el-table-column  label="bb" min-width="8%" show-overflow-tooltip><template slot-scope="scope">{{ scope.row.year }}</template></el-table-column><el-table-column  label="cc" min-width="16%" ><template slot-scope="scope"><div class="fleet-group-div" ><el-dropdown trigger="click" placement="bottom" :teleported="false"><div class="el-dropdown-link"><div class="el-dropdown-link-label" :title="123123">下拉菜单下拉菜单下拉菜单下拉菜单下拉菜单下拉菜单下拉菜单下拉菜单下拉菜单下拉菜单下拉菜单下拉菜单</div><i class="el-icon-arrow-down el-icon--right"></i></div><el-dropdown-menu slot="dropdown" class="fleet-group-div-dropdown "><el-checkbox-group v-model="scope.row.fleetGroup" class="fleet-group-div-dropdown-item" size="medium"><el-checkbox v-for="(i,j) in groupOptions" :key="j" :label="i.name" :title="i.name">{{i.name}}</el-checkbox></el-checkbox-group></el-dropdown-menu></el-dropdown></div></template></el-table-column><el-table-column label="" min-width="16%" show-overflow-tooltip><template slot-scope="scope"><el-link type="primary"  style="color:#2764B0" :underline="false">View</el-link></template></el-table-column></el-table></div></template></el-table-column></el-table>

 数据结构：

  vehicleGroupTableData:[ // Vehicle Groups 表格数据{groupName: 'group A',  // Group Nameid:1,vehicles:[{nickName:"昵称",vin:'123123123123',year:'2025',fleetGroup:['GroupA','GroupB','GroupC'],isChecked:false},{nickName:"昵称2",vin:'12312312312312',year:'20251',fleetGroup:['GroupA2','GroupB2','GroupC2'],isChecked:false}]},{groupName: 'group B',  // Group Nameid:2,vehicles:[{nickName:"昵称1",vin:'123123123123222',year:'20252',fleetGroup:['GroupAC','GroupB','GroupC'],isChecked:false}]},],

js代码：

  // 嵌套的内部的checkbox的点击handleNestedCheckboxChange(checked, row, index) {// 确保响应式更新this.$set(row, 'isChecked', checked);// 更新父表格的选中状态this.$nextTick(() => {const parentRow = this.vehicleGroupTableData.find(group =>group.vehicles.some(v => v.vin === row.vin));if (parentRow) {// 3. 计算父行的选中状态const checkedCount = parentRow.vehicles.filter(v => v.isChecked).length;const totalCount = parentRow.vehicles.length;// 4. 更新父行的选中状态const isAllChecked = checkedCount === totalCount;const isIndeterminate = checkedCount > 0 && checkedCount < totalCount; //是否是未全选// 5. 使用Element UI的API更新状态this.$refs.multipleGroupTable.toggleRowSelection(parentRow,isAllChecked);// 7. 添加row-class-name来反映状态this.$refs.multipleGroupTable.$el.querySelectorAll('.el-table__row').forEach(el => {const rowData = el.__vue__?.row;if (rowData === parentRow) {// 获取dom节点let dom = el.querySelector('.el-table-column--selection').querySelector('.el-checkbox__input')this.$nextTick(()=>{dom.classList.toggle('is-indeterminate',isIndeterminate);})}});}});setTimeout(()=>{this.$forceUpdate()})},handleSelectionGroupChange(val){this.multipleGroupSelection = val;//  // 如果外层行被选中/取消选中，同步到所有子行this.vehicleGroupTableData.forEach(row => {if(this.multipleGroupSelection.includes(row)){ // 如果当前行被选中// 则需要遍历当前行下面的vehicles下的每一项,给每一项的isChecked设置为truerow.vehicles.forEach(vehicle => {vehicle.isChecked =  this.multipleGroupSelection.includes(row)})}else{row.vehicles.forEach(vehicle => {vehicle.isChecked = false})}})},