ElementUI中el-tree节点的操作的实现

下面我会详细讲解在ElementUI中操作el-tree节点的实现攻略。

首先，请确保你已经正确引入ElementUI，以及el-tree组件。在此基础上，我们进入操作el-tree节点的实现过程。

一、添加节点

可以通过以下方法向el-tree中添加节点：

<template>
  <el-tree :data="data" ref="tree">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ data.label }}</span>
      <el-button type="text" size="mini" @click.stop="handleAdd(node)">Add</el-button>
    </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: 'Level one 1',
          children: [
            {
              label: 'Level two 1-1',
              children: [
                {
                  label: 'Level three 1-1-1'
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleAdd(node) {
      const child = { label: '新的节点' };
      if (!node.children) {
        this.$set(node, 'children', []);
      }
      node.children.push(child);
    }
  }
};
</script>

在el-tree中，每个节点都是一个对象，所以可以通过操作对象的方式来添加节点。这里的handleAdd方法中，首先判断节点是否有children属性，如果没有则使用Vue.set方法手动添加；然后再向子节点数组中添加一个新的节点。

二、选中节点

可以通过以下方法选中指定节点：

<template>
  <el-tree :data="data" ref="tree" @node-click="handleClick">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: 'Level one 1',
          children: [
            {
              label: 'Level two 1-1',
              children: [
                {
                  label: 'Level three 1-1-1',
                  id: 1
                },
                {
                  label: 'Level three 1-1-2',
                  id: 2
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleClick(data, node) {
      console.log('data:', data);
      console.log('node:', node);
      node.isSelected = true;
    }
  }
};
</script>

在el-tree中，可以通过@node-click事件监听节点的点击事件。在handleClick方法中，我们可以获取到该节点的数据对象data以及节点对象node。通过为节点对象添加isSelected属性，并赋值为true，来实现选中该节点的效果。

以上是实现el-tree节点操作的两个示例，希望能帮助你完成对el-tree节点操作的理解。