vue使用VueOkrTree實現組織架構樹組件

最近做項目中給了一個需求需要實現一個類似於思維導圖的組織架構樹組件,就在網上找，發現一個大佬個人寫的一個組件，非常好用。

作者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 (
        <div class="renderTree">
          <div><span>被督導單位：{node.data.soncompanyname}</span></div>
          <div><span>被督導崗位：{node.data.sonpostname}</span></div>
          <div class="gisfamily font13">{node.data.thislinkendtime}</div>
          <div class="renderTree_color">
            <span class="renderTree_radius" style={'background:'+node.data.itemstatuscolor+''}></span> // 自定義拼接動態顏色
            <span class="renderTree_status" style={'background:'+node.data.itemstatuscolor+''}>{node.data.itemstatusname}</span> // 自定義拼接動態顏色
          </div>
          <div><span>督導單位：{node.data.companyname}</span></div>
          <div><span>督導崗位：{node.data.postname}</span></div>
        </div>
      )
    },
  }
// 4.style中設置一些默認的樣式
<style>
  .org-chart-node-label-inner{
    font-size: 12px !important; // 設置樹的默認字體
  }
  
  /* 設置樹寬度 */
  .org-chart-container{
    width: 1300px !important;
    height: 330px !important;
    display: flex !important;
    align-items: center !important;
    overflow: auto;
    scrollbar-color: #515151 rgba(0, 0, 0, 0.1);  /* 第一個方塊顏色，第二個軌道顏色(用於更改火狐瀏覽器樣式) */
    scrollbar-width:thin;
  }
</style>