vue搭配iview使用vue2-org-tree（组织结构图）增删节点实现

左手的ㄟ右手 2021-08-26 14:32 2386阅读 0赞

首先npm安装依赖

npm install --save-dev less less-loader
    npm install --save-dev vue2-org-tree

在main.js中引入并使用

import Vue2OrgTree from 'vue2-org-tree' 
    Vue.use(Vue2OrgTree);

新建组件中使用

<vue2-org-tree name="test"
                :data="dataTree"
                :horizontal="horizontal"
                :collapsable="collapsable"
                :label-class-name="labelClassName"
                :renderContent="renderContent"
                @on-expand="onExpand"
                @on-node-click="onNodeClick"
              />
    
    //data中的数据
    data(){
        return{
          dataTree: {
            id: 0,
            label: "XXX科技有限公司",
            children: [
              {
                id: 2,
                label: "产品研发部",
                children: [
                  {
                    id: 5,
                    label: "研发-前端"
                  },
                ]
              },
              {
                id: 3,
                label: "销售部",
                children: [
                  {
                    id: 7,
                    label: "销售一部"
                  },
                  {
                    id: 8,
                    label: "销售二部"
                  }
                ]
              },
              {
                id: 4,
                label: "财务部"
              },
              {
                id: 9,
                label: "HR人事"
              }
            ]
          }, 
          horizontal: false,
          collapsable: false,
          expandAll: true,
          labelClassName: "bg-white",
        }
    },
    
    
     created(){
          this.toggleExpand(this.dataTree, this.expandAll);
        },
    
     methods:{
        toggleExpand(dataTree, val) {
          var _this = this;
          if (Array.isArray(dataTree)) {
            dataTree.forEach(function(item) {
              _this.$set(item, "expand", val);
              if (item.children) {
                _this.toggleExpand(item.children, val);
              }
            });
          } else {
            this.$set(dataTree, "expand", val);
            if (dataTree.children) {
              _this.toggleExpand(dataTree.children, val);
            }
          }
        },
        onExpand(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) {
          // alert(data.label);
        },
         renderContent(h, data) {
          return h('Dropdown', { 
            attrs: {
              trigger: 'click'
            },
          },[
            h('a',{
              domProps: {
                href: 'javascript:;'
              },
              on: {
                click: () => {
                  this.showFlag = data.children ? true: false;
                }
              }
            },data.label),
            h('DropdownMenu',{
              slot: 'list',
            },[
                h('DropdownItem',{
                  nativeOn: {
                    click: () => {
                    }
                  }
                },'修改机构'),
                h('DropdownItem',{
                  style: {
                    display: (data.id != 0 && !data.children) ? 'block' : 'none'
                  },
                   nativeOn: {
                    click: () => {
                       this.$Modal.confirm({
                        title: '确定要删除吗？',
                        onOk: () => {
                            this.$Message.info('删除成功');
                            //删除成功
                        },
                      });
                    }
                  }
                },'删除机构')
              ]
            )
          ])
        },
      }

上面 `DropdownMenu` 和 `DropdownItem 都是iview的组件，利用render函数动态写标签，嵌套解构请参考iview`

主要是renderContent方法中编写render函数来实现，对每个不同节点的对应操作。例如删除操作不能是根，不能有子节点。

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70][]                ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200306170745983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1]: /images/20210813/7b9027c919e6472a8f6c33216a55632a.png