1、需求:父节点勾选后,其子节点也勾选,删除父节点,子节点也被删除
2、代码
renderContent(h, { node, data }) {
return (
<span class='custom-tree-node'>
<span class='tree-node-text-ie'>
<span>{node.label}</span>
</span>
{data.children && data.children.length > 0 ? (
<span class='tree-node-icon-ie'>
<el-tooltip
class='item'
effect='dark'
content='选中当前节点和所有下级节点'
placement='top-start'
>
<el-button
size='mini'
type='text'
style='font-size: 12px;'
on-click={() => this.selectChildren(data)}
>
<i class='el-icon-circle-check' />
</el-button>
</el-tooltip>
<el-tooltip
class='item'
effect='dark'
content='取消选中当前节点和所有下级节点'
placement='top-start'
>
<el-button
size='mini'
type='text'
style='font-size: 12px;'
on-click={() => this.unSelectChildren(data)}
>
<i class='el-icon-circle-close' />
</el-button>
</el-tooltip>
</span>
) : (
<span></span>
)}
</span>
)
},
selectChildren(data) {
const nodes = this.$refs.mainTree.getCheckedNodes()
const ids = []
ids.push(data.dhccCode)
for (let i = 0; i < nodes.length; i++) {
ids.push(nodes[i].dhccCode)
}
getAllChildrenIds(ids, data)
this.$refs.mainTree.setCheckedKeys(ids)
},
unSelectChildren(data) {
const ids = []
ids.push(data.dhccCode)
getAllChildrenIds(ids, data)
for (let i = 0; i < ids.length; i++) {
this.$refs.mainTree.setChecked(ids[i], false)
}
}
export function getAllChildrenIds(ids, data) {
if (data.children !== undefined) {
for (let i = 0; i < data.children.length; i++) {
ids.push(data.children[i].dhccCode)
const child = data.children[i]
getAllChildrenIds(ids, child)
}
} else {
return
}
}