Vue2-org-tree插件 树形管理 详解

介绍

       Vue2-org-tree是一个基于Vue.js的组织树组件，用于展示和管理组织结构。它提供了一个简单易用的界面，可以快速构建出具有层级关系的组织结构图。

       使用Vue2-org-tree可以轻松地构建出一个具有层级关系的组织结构图，并且可以根据实际需求进行定制和扩展。它是一个非常实用的组件，适用于各种需要展示和管理组织结构的场景。

1.安装

在控制台输入 npm install vue2-org-tree；

2.在main.js里面引入和挂载

import Vue2OrgTree from 'vue2-org-tree'

import './styles/org-tree.less'

Vue.use(Vue2OrgTree)

//注释：样式文件放在文章顶部资源了，可自行下载

3.页面

 HTML部分
 <div>
    <vue2-org-tree
      class="cursor-pointer"
      :data="要传的data类型为object object中children为数组"
      :horizontal="传true或false true代表树是横向，false是竖向"
      :collapsable="传true或false true为默认展开 false为默认收起"
      @on-expand="业务逻辑处理"
      :render-content="renderContent该属性为自定义节点，可在JS方法中返回自定义节点"
      @on-node-click="业务逻辑处理"
    />
  </div>

 4.js部分

export default {
  name:"node-tree",
  props: {
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      treeData:{},
      collapsable: true,
      expandAll: false,
      nodeData: {}
    }
  },
  mounted() {
    this.getTreeData()
  },
  methods: {
    // 获取节点数据
    async getTreeData() {
      const res = await getTree(this.type)
      this.treeData = res
      this.nodeData = this.treeData
      this.expandChange()
      let orgTreeList = document.getElementsByClassName('org-tree-node-label-inner');
      orgTreeList[0].style.background = "#bae7ff";
      this.backNodeData()
    },
    // 每个节点的渲染
    renderContent(h, data) {
      return (
        <div>
          <div>
            {data.label}
          </div>
          <div>{data.defaultValue}</div>
        </div>
      )
    },
     // 节点树展开
    collapse(list) {
      var _this = this;
      list.forEach(child => {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    // 点击事件
    onNodeClick(e, data) {
      // 点击节点更改背景色
      let orgTreeList = document.getElementsByClassName('org-tree-node-label-inner');
      for (let i = 0; i < orgTreeList.length; i++) {
        let item = orgTreeList[i];
        item.style.background = "#fff"
      }
      if(e.target.className === "org-tree-node-label-inner"){
        e.target.style.background = "#bae7ff";
      } else {
        if (e.target.parentNode.parentNode.className === "org-tree-node-label-inner" ) {
          e.target.parentNode.parentNode.style.background = "#bae7ff";
        }
      }
      this.nodeData = data
      this.backNodeData()
    },
    // 父级展开方法
    expandChange() {
      this.expandAll = !this.expandAll;
      this.toggleExpand(this.treeData, this.expandAll);
    },
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(item => {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    },
    // 返回父组件数据
    backNodeData(){
      this.$emit("backData", this.nodeData)
    }
  }
}