el-table树状选择子集全选父级勾选
时间: 2023-11-23 21:56:30 浏览: 96
el-table树形表格表单验证(列表生成序号)
为了实现el-table树状选择子集全选父级勾选,可以在el-table中绑定ref属性,然后在methods中定义selectAll方法。具体实现步骤如下:
1.在el-table中绑定ref属性,例如:ref="districtTable"。
2.在methods中定义selectAll方法,该方法用于全选/取消选操作。具体实现如下:
```javascript
selectAll() {
this.isAllSelect = !this.isAllSelect; // isAllSelect data里定义的初始值
this.splite(this.parentsData, this.isAllSelect); // parentsData 表格存储的数据
}
```
3.在methods中定义splite方法,该方法用于处理数据。具体实现如下:
```javascript
splite(data, flag) {
data.forEach((row) => {
this.$refs.districtTable.toggleRowSelection(row, flag); // districtTable el-table里绑定的ref
if (row.parentDetailWithRelationshipVOS != undefined) {
this.splite(row.parentDetailWithRelationshipVOS); // parentDetailWithRelationshipVOS 子节点的数据
}
});
}
```
4.在el-table中绑定@select-all事件,该事件触发selectAll方法。具体实现如下:
```html
<el-table
ref="districtTable"
@select-all="selectAll"
>
<!-- 表格内容 -->
</el-table>
```
阅读全文