【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞使用vue-content-menu定制可编辑树结构editableTree

置顶

小白Rachel

已于 2023-03-23 11:35:09 修改

阅读量1.9w

点赞数 21

分类专栏：前端工作日记随笔 Vue项目实战 elementUI组件优化文章标签： vue.js ui elementui el-tree 组织机构树

于 2021-12-03 17:43:52 首次发布

本文链接：https://blog.csdn.net/Sabrina_cc/article/details/121701526

版权

文章资源连接（如果需要付费，联系我修改即可）：https://download.csdn.net/download/Sabrina_cc/87607289

好吧吐槽一下，公司决定之后的技术栈都是vue了，我又从React转战回来了。干巴爹

好的生活方式，是和一群志同道合的人，一起奔跑在理想的路上！回头有一路的故事，低头有坚定的脚步，抬头有清晰的远方。

首先了解Element-UI中定义的基础Tree树组件Element - The world's most popular Vue UI framework

三、使用Tree组件实现组织机构树查询列表功能

一、页面效果预览

页面解释：页面左边包含组织机构树，点击机构后，右侧列表显示对应公司的人员信息列表，点击即发生页面效果变化，在tree中可以对组织进行搜索，同时右侧可以对人员账户进行查询，并进一步进行新建、编辑和删除操作。

二、Tree组件的设计

1.修改elementUI的tree结构

<template>
  <div class="content">
    <div>组织列表</div>
    <el-input
      class="searchInput"
      placeholder="输入关键字进行过滤"
      v-model="filterText"
      suffix-icon="el-icon-search"
    >
    </el-input>
    <div class="treeDiv">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        ref="tree"
        highlight-current
        default-expand-all
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
        node-key="id"
        :current-node-key="currentNodeKey"
        :filter-node-method="filterNode"
      ></el-tree>
    </div>
  </div>
</template>

<script>
import { getOrgTreeData } from "@/api/people/people";

export default {
  data() {
    return {
      filterText: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentNodeKey: "",
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {},
  mounted() {
    getOrgTreeData().then((res) => {
      this.treeData = res.data;
      this.currentNodeKey = res.data[0].id;
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(res.data[0].id);
      });
      this.$emit("getTreeData", res.data[0]);
    });
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      this.$emit("getTreeData", data);
    },
  },
};
</script>

2.绑定属性解释

（1） :data="treeData" 绑定树结构对应的数据，需要在data中定义treeData数组。

data() {
    return {
      filterText: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentNodeKey: "",
    };
  },

（2）:props="defaultProps" 配置treeData数据中对应的属性名称，方便前后端统一属性名以及二级属性名

（3） node-key="id" 对于获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置node-key。

（4）ref="tree"

（5）highlight-current 是否高亮当前选中节点，默认值是 false。

（6）default-expand-all 是否默认展开所有节点默认值是 false。

（7）:expand-on-click-node="false" 是否在点击节点的时候展开或者收缩节点，默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

（8）@node-click="handleNodeClick" 节点点击时的回调

（9）:current-node-key="currentNodeKey" 当前选中的节点，绑定data中自定义的数据，方便后续操作

（10）:filter-node-method="filterNode" 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏。

在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。