在Vue项目中使用Element UI的el-tree
组件动态添加子级并且设置选中节点,可以通过操作组件的data
属性来实现。以下是一个简单的例子:
<template>
<div>
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
ref="tree"
></el-tree>
<el-button @click="addChild">添加子节点</el-button>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1'
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
},
currentNode: null
};
},
methods: {
handleNodeClick(data, node) {
this.currentNode = data;
},
addChild() {
if (this.currentNode) {
if (!this.currentNode.children) {
this.$set(this.currentNode, 'children', []);
}
this.currentNode.children.push({
id: this.generateId(),
label: `新节点-${this.currentNode.children.length + 1}`,
});
} else {
this.$message.error('请先选择一个节点');
}
},
generateId() {
const maxId = Math.max(...this.treeData.map(node => node.id), 0);
return maxId + 1;
}
}
};
</script>
在这个例子中,我们定义了一个treeData
作为树组件的数据源。通过点击按钮触发addChild
方法,如果当前选中了节点,则在其子节点数组中添加一个新的节点,如果没有选中节点,则给出错误提示。handleNodeClick
方法用于设置当前选中的节点,以便添加子节点时能够正确引用。generateId
方法用于生成新节点的唯一ID。