Vue项目-Element-UI el-tree动态添加子级 && 选中节点设置

在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。