需求
- 表格展开行后嵌套子表
- 只展开一行子表(展开一行,关闭另一行,已实现)
- 只在展开子表时,请求接口获取该行下子表的数据
问题
- 当前行展开后,点击当前行外层开关会自动折叠当前行
- 只展开一行后,点击其他行的外层开关会被自动折叠(同时,之前判断该行打开关闭状态的逻辑混乱,因为被自动折叠时状态也会成为关闭状态,所以下边代码中置空this.expands = []
- 展开一行后,点击上一行外层开关,再点击其他行展开,请求子表数据的父级id 会是上一步点击外层开关行的id
解决
![关于elementUI,el-table中展开行后嵌套表格,外层操作按钮el-switch 开关和展开行事件处理_第1张图片](http://img.e-com-net.com/image/info8/102cb54b595c47bf9c9e7e260c6f457d.jpg)
<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) {
if (expandedRows.length > 1) {
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) {
this.expands = [];
this.$message.success('修改成功');
} else {
this.$message.error('修改失败');
}
});
},