动态控制el-tree节点展开和关闭
时间: 2023-07-20 18:22:41 浏览: 528
在使用 Element UI 的 Tree 组件时,可以通过 `default-expand-all` 或者 `default-expanded-keys` 属性来设置默认展开的节点,但是如果需要动态控制节点的展开和关闭,需要进行以下操作:
1. 在树形结构数据中添加一个 `children` 属性,表示当前节点的子节点
2. 在 `el-tree` 的 `node-click` 事件中调用 `loadNode` 方法,加载当前节点的子节点数据
3. 在 `el-tree` 的 `expand-change` 事件中更新当前节点的 `children` 属性为新的子节点数据
4. 在 `el-tree` 的 `render-content` 事件中判断当前节点是否含有子节点,如果有则渲染展开/关闭图标
以下是一个简单的示例代码:
```html
<template>
<el-tree :data="treeData" :render-content="renderContent" :load="loadNode" @node-click="handleNodeClick" @expand-change="handleExpandChange"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '节点1',
isLeaf: false,
children: []
}
]
}
},
methods: {
loadNode(node, resolve) {
// 加载子节点数据
setTimeout(() => {
resolve([
{ id: 2, label: '子节点1', isLeaf: true },
{ id: 3, label: '子节点2', isLeaf: true },
{ id: 4, label: '子节点3', isLeaf: true }
])
}, 1000)
},
handleNodeClick(node) {
// 点击节点时展开/关闭节点
this.$refs.tree.toggleNode(node)
},
handleExpandChange(node, expanded) {
// 更新节点的子节点数据
if (expanded) {
this.loadNode(node, (children) => {
this.$set(node, 'children', children)
})
} else {
this.$set(node, 'children', [])
}
},
renderContent(h, { node, data }) {
// 自定义节点内容,包括展开/关闭图标
const hasChildren = data.children && data.children.length
const expandIcon = node.expanded ? 'el-icon-minus' : 'el-icon-plus'
return (
<span>
<i class={'el-icon-caret-right' + (hasChildren ? ' has-children ' + expandIcon : '')}></i>
{data.label}
</span>
)
}
}
}
</script>
```
在这个示例中,我们定义了一个树形结构的数据 `treeData`,其中每个节点包含一个 `children` 属性,表示当前节点的子节点。在 `el-tree` 的 `node-click` 事件中调用 `toggleNode` 方法切换节点的展开状态,然后在 `el-tree` 的 `expand-change` 事件中根据节点的展开状态加载或清空子节点数据。在 `el-tree` 的 `render-content` 事件中判断当前节点是否含有子节点,如果有则渲染展开/关闭图标。
阅读全文