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

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

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

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

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

目录

一、页面效果预览

二、Tree组件的设计

1.修改elementUI的tree结构

2.绑定属性解释

3. 渲染Tree组件数据

(1) 对照后端接口

​(2)调接口获取组织机构树信息

(3) 组织机构效果图

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

 1. 搭建主页面核心框架

2.显示主页面列表数据

(1)在data中定义查询参数

(2)调接口显示列表数据

3.组件传值显示数据

 四、实现右键新增删除的组织机构树

1.安装vue-context-menu

(1) 安装vue-context-menu

(2)在main.js中引用

2.使用vue-context-menu

3.修改组织机构树

(1) el-tree添加鼠标右击事件

(2) 编辑右键菜单函数

(3) 实现菜单按钮功能

---

一、页面效果预览

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

二、Tree组件的设计

1.修改elementUI的tree结构

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，值为过滤函数。

3. 渲染Tree组件数据

（1）对照后端接口