Vue树形架构插件vue-org-tree

Vue树形架构插件vue-org-tree

注：2019-8-21在从心_205a书友的帮助下解决了bug：节点无法展开问题

底下这个函数一定要写两个参数，如果只写onExpand(data)，data.expand结果是undefined
这个应该是插件的bug，一般只写一个参数也是可以
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);
      }
    }

注：2019-8-21解决了bug：点击选项要跳转链接，点击展开收缩按钮也会跳转

  增加判断语句即可，默认展开收缩按钮对象里的url肯定是空
  onNodeClick(e, data) {
       //console.log(data.label);
       if(data.url==null){
        return false
      }else{
        window.open(data.url)
      }
    },

文档传送门https://github.com/hukaibaihu/vue-org-tree

使用步骤（这里以在vue-cli3的项目为例）

Ⅰ.安装：这边安装一定要加-D
cnpm install -D less-loader less
cnpm install -D vue2-org-tree

Ⅱ.在main.js引入注册
import Vue2OrgTree from 'vue2-org-tree';
Vue.use(Vue2OrgTree)

Ⅲ.在router.js中注册路由tree.vue
import tree from '../components/tree.vue';

routes增加配置

Ⅳ.在tree.vue里写页面

//示例代码

Ⅴ.效果图

image

本文同步发表在我的个人博客：https://www.lubaojun.com/