vue 实战技巧之el-tree使用技巧

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
    :expand-on-click-node="false"
  >
    <span slot-scope="{ node, data }" class="custom-tree-node">
      <span>{{ node.label }}</span>
      <span>
        <el-button
          type="text"
          size="mini"
          @click="() => append(data)"
        >
          增加
        </el-button>
        <el-button
          type="text"
          size="mini"
          @click="() => edit(data)"
        >
          编辑
        </el-button>
        <el-button
          type="text"
          size="mini"
          @click="() => remove(node, data)"
        >
          删除
        </el-button>
      </span>
    </span>
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        // ...
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      // 节点点击事件的处理函数
      console.log(data);
    },
    append(data) {
      // 增加子节点的逻辑
      console.log(data);
    },
    edit(data) {
      // 编辑节点的逻辑
      console.log(data);
    },
    remove(node, data) {
      // 删除节点的逻辑
      console.log(node, data);
    }
  }
};
</script>
 
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>

这个代码实例展示了如何在Vue中使用Element UI的el-tree组件，并通过自定义slot添加了增加、编辑和删除按钮，用于对树节点进行操作。同时，提供了各个操作的处理函数，这些函数可以根据实际需求进行逻辑编辑。