vue使用vue-okr-tree实现组织架构树组件

本文转载与其他博主

最近做项目中给了一个需求需要实现一个类似于思维导图的组织架构树组件,就在网上找，发现一个大佬个人写的一个组件，非常好用。

作者demo演示地址
1.下载

# use npm
npm i vue-okr-tree

# use yarn
yarn add vue-okr-tree

2.引入（可以在需要用到的组件引入，也可以注册全局引入）

import { VueOkrTree } from 'vue-okr-tree';
import 'vue-okr-tree/dist/vue-okr-tree.css'

3.使用

// 在这里我使用的是节点自定义内容，通过 render-content 渲染节点内容。
// 1.组件引入并注册完毕后，在template标签引入组件。
  <vue-okr-tree 
    :data="testData" // 数据源
    direction="horizontal" // 树排列方式 支持 horizontal / vertical
    show-collapsable // 节点是否可被展开（默认为false）
    default-expand-all // 是否默认展开所有节点，该参数只有在 show-collapsable 为 true 时有效
    :render-content="renderContent" // 自定义渲染节点内容
    label-width="205px" // 节点的宽度，默认为自动宽度（string / number）
  />

// 2.export default中
  data(){
    return{ 
      testData:[] // 数据源
   }
  }

// 3.methods函数中
  methods:{
    // 通过 render-content 渲染节点内容。
    renderContent (h, node) {
      return (
        

          
被督导单位：{node.data.soncompanyname}
          
被督导岗位：{node.data.sonpostname}
          
{node.data.thislinkendtime}
          

             // 自定义拼接动态颜色
            {node.data.itemstatusname} // 自定义拼接动态颜色
          
          
督导单位：{node.data.companyname}
          
督导岗位：{node.data.postname}
        
      )
    },
  }
// 4.style中设置一些默认的样式

本文作者：MELANCHOLYS

本文链接：https://www.cnblogs.com/melancholys/p/14991680.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

分类: Vue