关于elementUI,el-table中展开行后嵌套表格,外层操作按钮el-switch 开关和展开行事件处理

需求

• 表格展开行后嵌套子表
• 只展开一行子表(展开一行,关闭另一行,已实现)
• 只在展开子表时,请求接口获取该行下子表的数据

问题

• 当前行展开后,点击当前行外层开关会自动折叠当前行
• 只展开一行后,点击其他行的外层开关会被自动折叠(同时,之前判断该行打开关闭状态的逻辑混乱,因为被自动折叠时状态也会成为关闭状态,所以下边代码中置空this.expands = []
• 展开一行后,点击上一行外层开关,再点击其他行展开,请求子表数据的父级id 会是上一步点击外层开关行的id

解决

 <el-table ref="myTable" :data="tableData"  @expand-change="expandChange" style="width: 100%" >
    //嵌套表格
    <el-table-column type="expand">
    <el-table :data="childList" style="width: 60%; margin-left: 100px">
                <el-table-column
                    v-for="(value, id, index) in childColumns"
                    :key="index"
                    :label="value.label"
                    :prop="value.prop"
                >
                <el-table-column label="自动审批">
                    <template slot-scope="scopeChild">
                        <div @click.stop="">
                            <el-switch
                                v-model="scopeChild.row.isAudit"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change=" changeChildSwitch($event, scopeChild.row)">
                            </el-switch>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
  	</el-table-column>
  	//外层操作按钮
  	<template slot-scope="scope">
  	 <div @click.stop="">
        <el-switch
            v-model="scope.row.isAudit"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeSwitch($event, scope.row)"
        >
        </el-switch>
      </div>
  	</el-table-column>

  </el-table>

// 展开/折叠表格
   async expandChange(row, expandedRows) {
   //row: Object 被展开行的数据
   //expandedRows: Arrary 存放点击展开后行的数组
    if (expandedRows.length > 1) {
		    //toggleRowExpansion 切换某一行的展开状态,第二个参数控制展开/关闭
		    //this.$refs.myTable.toggleRowExpansion(expandedRows[0],true); 展开
            this.$refs.myTable.toggleRowExpansion(expandedRows[0]);
        }
        //存放被点击的行
        if (row) {
            this.expands.unshift(row);
        }
        //根据奇数 判断是否是打开状态
        if (this.expands.length % 2 !== 0) {
	        //网络请求 获取子表数据
            const { data } = await settingCountyReq(
                this.expands[0].id
            );
            //赋值
            this.childList = data;
        }
    },
    //外层开关
    changeSwitch(val, row) {
    	//修改状态
        settingCityEditReq({
                id: row.id,
                isAudit: val,
            })
            .then((res) => {
                if (res.code === 200) {
	                //修改成功后,给之前存放被点击的行的数组置空!!!!
	                //不论之前存了多少行,再次展开时又从新开始计算length
                    this.expands = [];
                    this.$message.success('修改成功');
                } else {
                    this.$message.error('修改失败');
                }
            });
    },