element树状表格checkbox选父带子，取消子取消父
Posted 包子源
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了element树状表格checkbox选父带子，取消子取消父相关的知识，希望对你有一定的参考价值。
element树状表格checkbox选父带子，取消子取消父
代码：
<template>
<div class="bodybox">
<el-table
class="treetable"
ref="fixtable"
border
:data="tableData"
row-key="id"
default-expand-all
:tree-props=" children: 'children', hasChildren: 'hasChildren' "
highlight-current-row
@select="checkSelect"
height="100%"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column
show-overflow-tooltip
prop="name"
label="名称"
></el-table-column>
<el-table-column
show-overflow-tooltip
prop="id"
label="编码"
></el-table-column>
</el-table>
</div>
</template>
<script>
export default
name: "Manage",
components: ,
data()
return
deleteArr: [],
tableData: [
id: "11",
name: "北京市",
children: [
id: "1101",
name: "市辖区",
pid: "11",
children: [
id: "110101", name: "东城区", pid: "1101", children: [] ,
id: "110102", name: "西城区", pid: "1101", children: []
]
]
,
id: "12",
name: "天津市",
children: [
id: "1201",
name: "市辖区",
pid: "12",
children: [
id: "120101", name: "和平区", pid: "1201", children: [] ,
id: "120102", name: "河东区", pid: "1201", children: []
]
]
]
;
,
methods:
// 多选
checkSelect(data, row)
row.isCheck = row.isCheck ? false : true;
this.checkFun(row.children, row.isCheck);
if (!row.isCheck)
this.clearCheckFun(this.tableData, row.pid);
this.deleteArr = [];
this.getId(this.tableData);
console.log(this.deleteArr);
,
// 递归选中
checkFun(data, status)
data.forEach(element =>
element.isCheck = status;
this.$refs.fixtable.toggleRowSelection(element, element.isCheck);
if (element.children)
this.checkFun(element.children, element.isCheck);
);
,
// 清除父节点选中
clearCheckFun(table, pid)
table.forEach(element =>
if (pid == element.id)
element.isCheck = false;
this.$refs.fixtable.toggleRowSelection(element, false);
if (element.pid)
this.clearCheckFun(this.tableData, element.pid);
else
if (element.children)
this.clearCheckFun(element.children, pid);
);
,
// 获取选中ID
getId(data)
data.forEach(element =>
if (element.isCheck)
this.deleteArr.push(element.id);
if (element.children)
this.getId(element.children);
);
;
</script>
<style lang="less">
.treetable
thead
.el-checkbox__inner
display: none;
</style>
效果
以上是关于element树状表格checkbox选父带子，取消子取消父的主要内容，如果未能解决你的问题，请参考以下文章