循序渐进VUE+Element 前端应用开发— 树列表组件的使用,循序渐进VUE+Element 前端应用开发— 表格列表页面的查询，列表展示和字段转义处理,...

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    default-expand-all
    :expand-on-click-node="false">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <el-button
          type="text"
          size="mini"
          @click="() => append(data)">
          Append
        </el-button>
        <el-button
          type="text"
          size="mini"
          @click="() => edit(data)">
          Edit
        </el-button>
        <el-button
          type="text"
          size="mini"
          @click="() => remove(node, data)">
          Delete
        </el-button>
      </span>
    </span>
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1'
            }
          ]
        }
      ]
    };
  },
  methods: {
    append(data) {
      const newChild = { id: id++, label: '新节点', children: [] };
      if (!data.children) {
        this.$set(data, 'children', []);
      }
      data.children.push(newChild);
    },
    edit(data) {
      console.log('edit', data);
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    }
  }
};
</script>

这个代码实例展示了如何使用Element UI的el-tree组件来创建一个可编辑的树列表。它包括了添加节点、编辑节点标签以及删除节点的基本操作。这个例子对于理解树形结构的数据操作和Vue组件的方法是很有帮助的。