vue2 使用vue-org-tree 组件完整示例Demo vue2-org-tree

已于 2022-11-02 14:18:39 修改
阅读量1.2w 收藏 40
点赞数 8
文章标签： vue.js javascript vue-org-tree
于 2022-11-02 10:51:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llanyw/article/details/127647395
版权

先上效果

可以切换节点颜色，展开与否，坚排或者横排都可以配置。

安装

安装vue2-org-tree, 然后再安装样式 less-loade

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

或者：

npm i vue2-org-tree -S
npm install --save-dev less less-loader –S

安装完成后，vue2项目根目录下package.json自动更新以上 2个包信息

 "dependencies": {
    "core-js": "^3.8.3",
    "echarts": "^5.4.0",
    "element": "^0.1.4",
    "element-ui": "^2.15.10",
    "install": "^0.13.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "moment": "^2.29.4",
    "vue": "^2.6.14",
    "vue-router": "^3.5.2",
    "vue2-org-tree": "^1.3.6"
  },

项目源码：

main.js

TreeTest.vue

<template>
  <div ref="appContainer" class="app-container">
    <div style="margin-left:30px;">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-switch v-model="horizontal" :width="50" active-text="横排" inactive-text="竖排" style="margin-top:8px;"/>
        </el-col>
        <el-col :span="5">
          <el-switch v-model="expandAll" :width="50" active-text="全部展开"
                     inactive-text="全部折叠" style="margin:8px;" @change="expandChange"/>
        </el-col>
        <el-col :span="14">
          <span style="font-size:14px;font-weight:500;">选择背景色:</span>
          <el-select v-model="labelClassName" @change="selectChange">
            <el-option value="bg-white" label="白色">白色</el-option>
            <el-option value="bg-orange" label="橘黄色">橘黄色</el-option>
            <el-option value="bg-gold" label="金色">金色</el-option>
            <el-option value="bg-gray" label="灰色">灰色</el-option>
            <el-option value="bg-lightpink" label="浅粉色">浅粉色</el-option>
            <el-option value="bg-chocolate" label="巧克力色">巧克力色</el-option>
            <el-option value="bg-tomato" label="番茄色">番茄色</el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div style="font-size:12px;margin-top:30px;">
      <el-scrollbar :style="scrollTreeStyle" class="el-org-tree">
        <vue2-org-tree
            :data="treeData.data"
            :horizontal="!horizontal"
            :collapsable="collapsable"
            :label-class-name="labelClassName"
            :render-content="renderContent"
            name="organ"
            @on-expand="onExpand"
            @on-node-click="onNodeClick"/>
      </el-scrollbar>
    </div>
    <br/><br/>
  </div>
</template>


<script>
export default {
  name: "TreeTest",
  data() {
    return {
        "treeData": {
          labelClassName: "bg-color-orange",
          basicInfo: { id: null, label: "---null" },
          basicSwitch: false,
          data: {
            id: 0,
            label: "XXX科技有限公司",
            children: [
              {
                id: 2,
                label: "产品研发部",
                children: [
                  {
                    id: 5,
                    label: "研发-前端",
                    children: [
                      {
                        id: 55,
                        label: "前端1"
                      },
                      {
                        id: 56,
                        label: "前端2"
                      },
                      {
                        id: 57,
                        label: "前端3"
                      },
                      {
                        id: 58,
                        label: "前端4"
                      }
                    ]
                  },
                  {
                    id: 6,
                    label: "研发-后端"
                  },
                  {
                    id: 9,
                    label: "UI设计"
                  },
                  {
                    id: 10,
                    label: "产品经理"
                  }
                ]
              },
              {
                id: 3,
                label: "销售部",
                children: [
                  {
                    id: 7,
                    label: "销售一部"
                  },
                  {
                    id: 8,
                    label: "销售二部"
                  }
                ]
              },
              {
                id: 4,
                label: "财务部"
              },
              {
                id: 9,
                label: "HR人事"
              }
            ]
          },
        }
      ,
      horizontal: true, //横版 竖版
      collapsable: false,
      expandAll: true, //是否全部展开
      labelClassName: '白色', // 默认颜色
      scrollTreeStyle: 'width:100%;',
    }
  },
  methods: {
    //渲染节点
    renderContent(h, data) {
      return (
          <div>
            <div>
              <i class="el-icon-user-solid"></i>
              <span>{data.label}</span>
              <span>男</span>
            </div>
            <div style="font-size:12px;line-height:20px;">测试人员</div>
          </div>
      );
    },

    //鼠标移出
    onMouseout(e, data) {
      this.treeData.basicSwitch = false;
    },
    //鼠标移入
    onMouseover(e, data) {
      this.treeData.basicInfo = data;
      this.treeData.basicSwitch = true;
      var floating = document.getElementsByClassName("floating")[0];
      floating.style.left = e.clientX + "px";
      floating.style.top = e.clientY + "px";
    },
    //点击节点
    NodeClick(e, data) {
      console.log(e, data);
    },
    //默认展开
    toggleExpand(data, val) {
      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);
        }
      }
    },
    collapse(list) {
      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);
      }
    },
    getList() {
      // 后台回去的数据 赋值给data即可
    },

    // 自定义您的点击事件
    onNodeClick(e, data) {
      alert("点击")
    },

    expandChange() {
      this.collapsable = true
      this.toggleExpand(this.treeData.data, this.expandAll)
    },
    selectChange(){

    }

  }


}
</script>

<!--<style scoped>-->
<!--</style>-->
<style lang="less">
.bg-white {
  background-color: white;
}
.bg-orange {
  background-color: orange;
}
.bg-gold {
  background-color: gold;
}
.bg-gray {
  background-color: gray;
}
.bg-lightpink {
  background-color: lightpink;
}
.bg-chocolate {
  background-color: chocolate;
}
.bg-tomato {
  background-color: tomato;
}
//.org-tree-node-label-inner {
//  color: #fff;
//  background-color: orange;
//}

.el-org-tree {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .org-tree-node-label {
    white-space: nowrap;
  }
  .el-tree-node__content{
    background: white;
  }
  .org-tree-node-label .org-tree-node-label-inner {
    padding-top: 8px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    cursor: pointer;
  }
  .horizontal .org-tree-node.is-leaf {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
</style>

App.vue 

<template>
  <div ref="appContainer" class="app-container">
    <div style="margin-left:30px;">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-switch v-model="horizontal" :width="50" active-text="横排" inactive-text="竖排" style="margin-top:8px;"/>
        </el-col>
        <el-col :span="5">
          <el-switch v-model="expandAll" :width="50" active-text="全部展开" inactive-text="全部折叠" style="margin-top:8px;" @change="expandChange"/>
        </el-col>
        <el-col :span="14">
          <span style="font-size:14px;font-weight:500;">选择背景色:</span>
          <el-select v-model="labelClassName" @change="selectChange">
            <el-option value="bg-white" label="白色">白色</el-option>
            <el-option value="bg-orange" label="橘黄色">橘黄色</el-option>
            <el-option value="bg-gold" label="金色">金色</el-option>
            <el-option value="bg-gray" label="灰色">灰色</el-option>
            <el-option value="bg-lightpink" label="浅粉色">浅粉色</el-option>
            <el-option value="bg-chocolate" label="巧克力色">巧克力色</el-option>
            <el-option value="bg-tomato" label="番茄色">番茄色</el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div style="font-size:12px;margin-top:30px;">
      <el-scrollbar :style="scrollTreeStyle" class="el-org-tree">
        <vue2-org-tree
            :data="treeData"
            :horizontal="!horizontal"
            :collapsable="collapsable"
            :label-class-name="labelClassName"
            :render-content="renderContent"
            name="organ"
            @on-expand="onExpand"
            @on-node-click="onNodeClick"/>
      </el-scrollbar>
    </div>
  </div>
</template>


<script>
export default {
  name: "TreeTest",
  data() {
    return {
        "treeData": {
          labelClassName: "bg-color-orange",
          basicInfo: { id: null, label: null },
          basicSwitch: false,
          // data: {
            id: 0,
            label: "XXX科技有限公司",
            children: [
              {
                id: 2,
                label: "产品研发部",
                children: [
                  {
                    id: 5,
                    label: "研发-前端",
                    children: [
                      {
                        id: 55,
                        label: "前端1"
                      },
                      {
                        id: 56,
                        label: "前端2"
                      },
                      {
                        id: 57,
                        label: "前端3"
                      },
                      {
                        id: 58,
                        label: "前端4"
                      }
                    ]
                  },
                  {
                    id: 6,
                    label: "研发-后端"
                  },
                  {
                    id: 9,
                    label: "UI设计"
                  },
                  {
                    id: 10,
                    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: '白色', // 默认颜色
      scrollTreeStyle: 'width:100%;',
    }
  },
  methods: {
    //渲染节点
    renderContent(h, data) {
      return (
          <div>
            <div>
              <i class="el-icon-user-solid"></i>
              <span>{data.label}</span>
              <span>男</span>
            </div>
            <div style="font-size:12px;line-height:20px;">测试人员</div>
          </div>
      );
    },

    //鼠标移出
    onMouseout(e, data) {
      this.basicSwitch = false;
    },
    //鼠标移入
    onMouseover(e, data) {
      this.basicInfo = data;
      this.basicSwitch = true;
      var floating = document.getElementsByClassName("floating")[0];
      floating.style.left = e.clientX + "px";
      floating.style.top = e.clientY + "px";
    },
    //点击节点
    NodeClick(e, data) {
      console.log(e, data);
    },
    //默认展开
    toggleExpand(data, val) {
      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);
        }
      }
    },
    collapse(list) {
      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);
      }
    },
    getList() {
      // 后台回去的数据 赋值给data即可
    },

    // 自定义您的点击事件
    onNodeClick(e, data) {
      alert("点击")
    },

    expandChange() {
      this.collapsable = true
      this.toggleExpand(this.data, this.expandAll)
    },
    selectChange(){

    }

  }


}
</script>

<!--<style scoped>-->
<!--</style>-->
<style lang="less">
.bg-white {
  background-color: white;
}
.bg-orange {
  background-color: orange;
}
.bg-gold {
  background-color: gold;
}
.bg-gray {
  background-color: gray;
}
.bg-lightpink {
  background-color: lightpink;
}
.bg-chocolate {
  background-color: chocolate;
}
.bg-tomato {
  background-color: tomato;
}
//.org-tree-node-label-inner {
//  color: #fff;
//  background-color: orange;
//}

.el-org-tree {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .org-tree-node-label {
    white-space: nowrap;
  }
  .el-tree-node__content{
    background: white;
  }
  .org-tree-node-label .org-tree-node-label-inner {
    padding-top: 8px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    cursor: pointer;
  }
  .horizontal .org-tree-node.is-leaf {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
</style>

样式配置：

  •  *：horizontal 组织结构图的排列方式，水平还是竖直，值为true 或 false
  •          collapsable 折叠效果，值为true 或 false
  •          label-class-name 修改背景色，支持自定义类名
  •          render-content 定义如何渲染 node 标签，绑定的 renderContent 是函数
  •          on-expand 定义折叠的组织结构如何展开，该函数参数必须传两个，第一个是 e ，第二个是 data
  •          on-node-click 定义当前节点被点击时执行的方法

需要修改label名称

:render-content="renderContent" //这个属性 
renderContent(h, data) { return data.taskName },

注意：

注意：在style中引入样式，必须引入 引入全局样式： lang的值是less 样式

如下，否则展开收缩按钮显示不出来，可以通过上面方法安装，或者下载less文件引用。
<style lang="less">
@import '../libs/org-tree.less';
</style>

https://gitee.com/hukaicode/vue-org-tree/tree/master/src/styles

可以根据实际项目需要进行修改。

Lan.W
关注
  • 8
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2-org-tree 树形管理
weixin_42404521的博客
03-08 8571
好久没写了，越来越懒 vue2-org-tree本来老早就用了一直没记录，今天发现了bug，同事fix后记录一下吧，再遇到直接就command c + v 就好了 vue2-org-tree是一款插件快速构造树形（element ui 里的太丑了） step1 准备树形数据 这是我的数据可以直接拿着测试 { "treeData":[ { "sorted":1, "children":[ { .
vue-tree-color:漂亮的树看看那个
05-31
vue-tree-color 源码分支在 本项目是 针对 vue-org-tree 做得一个 demo ,并且根据公司项目进行修改 上传了 npm 包 下面我们开始讲解 浏览器兼容 Edge Firefox Chrome Safari Edge last 2 versions last 2 versions last 2 versions 前言 最近公司项目（Vue + Element ）需求有用到 tree ，所以呢我去网上找了很多插件，都不是很符合我的要求。最后在GitHub上面找到了一款插件是 iview 的组织结构树 vue-org-tree ,但是由于文档不是特别易懂，自己踩了很多坑。不过定制性特别高，基本上会用到的方法都有了。所以今天来给大家讲解下。 自己也根据业务需求修改了部分内容，下面我也会介绍到我修改的内容，重新修改了包上传到了npm 安装 NPM # use npm
vue-org-tree：基于Vue2.x的简单组织树
02-06
Vue-org-tree 基于Vue2.x的简单组织树形图 用法 NPM # use npm npm i vue2-org-tree # use yarn yarn add vue2-org-tree 导入插件 import Vue from 'vue' import Vue2OrgTree from 'vue2-org-tree' Vue . use ( Vue2OrgTree ) // ... CDN # css < link href =" https://unpkg.com/vue2-org-tree/dist/style.css " > # js < script src ="
Vue2-org-tree样式文件
11-27
Vue2-org-tree样式文件
Vue tree自定义滚动条位置
最新发布
rclack的博客
03-31 801
贴一张效果图，我的效果不方便贴出来 实现支持： 1、懒加载 2、普通加载 下面贴关键思想： document有一个获取element元素的方法。 let element = document.getElementById('tree'); let arr = document.querySelectorAll(".nodelModel"); 上面是关键代码 for(var i = 0; i < arr.length; i++) { let item = ar...
vue2-org-tree 树型结构的使用
qq_36437172的博客
10-18 899
使用 labelClassName API 给 label 上的 class，从而实现定义 label 样式。// 定义 label 样式},我们可以看到常量 colorObj，其对象中的 key 值是定价类型，value 值是所对应的 class 名称。
Vue2-org-tree插件 树形管理 详解
weixin_71854821的博客
12-05 1228
Vue2-org-tree是一个基于Vue.js的组织树组件，用于展示和管理组织结构。它提供了一个简单易用的界面，可以快速构建出具有层级关系的组织结构图。
vue2-datatable：永不过时的Vue.js 2.x最佳数据表。 如果喜欢，给我们一个星星star！ （不推荐使用。由于我，@ kenberkeley，唯一的维护者，不再适用于OneWay。错误可能已修复，但新功能或重大更改可能无法合并。但是，由于我对它的使用极为灵活，因此这仍然是我的最佳选择动态组件）
02-06
vue2-datatable-component 永远不会烂的Vue.js 2.x最佳数据表npm i -S vue2-datatable-component |
Vue2-org-tree详解
CJHCJHc的博客
09-18 1730
vue2-org-tree的使用
vue使用vue2-org-tree-节点增删改查(已实现)
hzqzzz的博客
08-03 3734
需要使用到树形图绘制人物关系节点，综合考虑选择了这个，结合elementUI实现。
详解树状结构图 vue-org-tree
热门推荐
Crazymryan的博客
03-26 1万+
前言 最近公司项目（Vue + Element ）需求有用到 tree ，所以呢我去网上找了很多插件，都不是很符合我的要求。最后在GitHub上面找到了一款插件是 iview 的组织结...
Vue关系结构插件的使用（vue-org-tree）
qq_42717015的博客
04-28 2213
Vue关系结构插件的使用（vue-org-tree）
vue-draggable-nested-tree:请使用he-tree-vue，不再保留vue-draggable-nested-tree
05-07
请使用新发布的, vue-draggable-nested-tree 将不再维护. Please use the , vue-draggable-nested-tree will no longer be maintained. 请使用新发布的, vue-draggable-nested-tree 将不再维护. Please use the , ...
vue-json-tree-view：Vue.js的JSON树视图组件
02-06
安装使用npm安装插件： npm install --save vue-json-tree-view 然后，在您的Application JavaScript中，添加： import TreeView from "vue-json-tree-view"Vue . use ( TreeView ) 做完了用法将tree-view元素放到...
vue3-blocks-tree:vue3块组织树视图组件。 分层的水平或垂直树
04-29
它支持事件，时段，水平视觉和节点操纵感谢和他以vue 2为基础的资料。用法< template> < h1>Basic</ h1> < div> < blocks xss=removed xss=removed xss=removed xss=removed></ blocks> </ div> < h1>With slots...
tree-sitter-vue:树保姆的Vue语法
05-01
安装npm install tree-sitter-vue tree-sitter用法const Parser = require ( "tree-sitter" ) ;const Vue = require ( "tree-sitter-vue" ) ;const parser = new Parser ( ) ;parser . setLanguage ( Vue ) ;const ...
vue项目使用vue2-org-tree (避免踩坑)
weixin_44111864的博客
06-08 2596
vue使用vue2-org-tree
vue项目使用vue2-org-tree
weixin_46328739的博客
02-24 522
设置label,renderContent 函数中返回一个包含多个文本并换行显示的元素。
code-vue2-org-tree 树型结构的使用
2301_76671906的博客
11-03 1241
vue2-org-tree 用于创建和显示组织结构树状图，可视化组织结构，例如公司的层级、部门之间的关系、团队层级关系这些，支持折叠，展开，自定义icon等
vue使用vue-org-tree不生效
06-02
如果你在 Vue 中使用 vue-org-tree 时遇到了问题，可以尝试以下几个步骤： 1. 确认你已经正确引入了 vue-org-tree 组件，可以在你的 Vue 组件中检查是否已经引入。例如： ``` import VueOrgTree from 'vue-org-tree' export default { components: { VueOrgTree } } ``` 2. 确认你已经正确使用了 vue-org-tree 组件，可以在你的 Vue 组件模板中检查是否已经使用。例如： ``` <template> <div> <vue-org-tree :data="treeData"></vue-org-tree> </div> </template> ``` 3. 确认你的数据格式是否正确，vue-org-tree 要求传入的数据格式是一个具有层级关系的树形结构，例如： ``` { label: 'Node 1', children: [ { label: 'Node 1.1', children: [] }, { label: 'Node 1.2', children: [ { label: 'Node 1.2.1', children: [] } ] } ] } ``` 4. 确认你已经正确引入了 vue-org-tree 的 CSS 文件，可以在你的 HTML 文件中检查是否已经引入。例如： ``` <link rel="stylesheet" href="path/to/vue-org-tree.css"> ``` 如果以上步骤都没有解决问题，可以提供更多的信息，例如你的代码和具体的错误信息，方便更好地帮助你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值