elementUI,el-table嵌套el-table,勾选联动效果
在Element UI中,el-table
嵌套 el-table
实现勾选联动效果,可以通过监听外层表格的 select
和 select-all
事件,然后手动控制内层表格的勾选状态来实现。
以下是实现该效果的示例代码:
<template>
<el-table
:data="outerData"
@select="handleOuterSelect"
@select-all="handleOuterSelectAll"
ref="outerTable"
row-key="id"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column property="name" label="外层表格"></el-table-column>
<!-- 嵌套表格 -->
<el-table-column label="内层表格">
<template slot-scope="scope">
<el-table
:data="scope.row.innerData"
:row-key="innerRow => innerRow.id"
ref="innerTable"
@select="handleInnerSelect"
@select-all="handleInnerSelectAll(scope.row.innerData)"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column property="name" label="Name"></el-table-column>
</el-table>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
outerData: [
// 外层表格数据
],
};
},
methods: {
handleOuterSelect(selection, row) {
this.handleInnerSelectAll(row.innerData, selection);
},
handleOuterSelectAll(selection) {
this.outerData.forEach(row => {
this.handleInnerSelectAll(row.innerData, selection);
});
},
handleInnerSelect(selection, row) {
if (selection.length && !selection.find(item => item.id === row.id)) {
// 如果内层表格有选中项,但当前行未被选中,则取消选中
this.$refs.innerTable.toggleRowSelection(row, false);
}
},
handleInnerSelectAll(innerData, selection) {
if (selection.length === 0) {
// 如果外层取消选中,则内层也取消选中
innerData.forEach(row => {
this.$refs.innerTable.toggleRowSelection(row, false);
});
} else {
// 如果外层全选,则内层也全选
this.$refs.innerTable.toggleAllSelection(innerData);
}
},
},
};
</script>
在这个示例中,外层表格每当发生选中或全选时,会调用 handleOuterSelect
和 handleOuterSelectAll
方法,这两个方法进而会调用 handleInnerSelectAll
方法来处理内层表格的选中状态。内层表格每次选中或取消选中时,会调用 handleInnerSelect
方法来处理与外层表格的联动。
注意:
- 确保每个表格行有一个唯一的
row-key
属性,这样可以保证表格的正常运行。 - 示例中的
innerData
和outerData
应该被替换为实际的数据结构。 - 示例代码中的
id
字段是假设的,实际使用时应该替换为你数据中的唯一标识字段。
评论已关闭