vue2-org-tree如何自定义内容？

效果图展示

安装

use npm:
npm i vue2-org-tree

use yarn:
yarn add vue2-org-tree

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vue2OrgTree from 'vue2-org-tree'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.use(Vue2OrgTree)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

代码实现

<template>
    <div id="tree_wrap_org">
        <vue2-org-tree
        :data="orgData"
        :selectedKey="id"
        :horizontal="true"
        :renderContent="renderContent"
        />
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
       </el-dialog>
    </div>
</template>
<script>
export default{
    data(){
        return{
            orgData: {
                    id: 1,
                    label: "前端",
                    children: [
                        {
                            id: 2,
                            label: "html",
                            children: []
                        },
                        {
                            id: 3,
                            label: "css",
                            children: []
                        },
                        {
                            id: 4,
                            label: "js",
                            children: []
                        }
                    ]
            },
            activeCard:null,
            dialogVisible:false
        }
    },
    methods: {
       changeActiveCard(data){
         this.activeCard = data.id;
       },
       append(data){
           console.log(data);
           this.dialogVisible = true;
       },
       renderContent(h, data) {
        return (
          <div class="card_wrap">
            <div class={{firstItem: data.id === 1, lastItem: data.id !== 1, card_item: true}}>
              <div class="card_title">{data.label.length >= 20 ? data.label.slice(0, 20) + '...' : data.label}</div>
              <span class={{circle_r: true, activeCard: this.activeCard === data.id}}
                    on-click={() => this.changeActiveCard(data)}></span>
            </div>
            <div class="add_btn">
              <i class="el-icon-circle-plus add" on-click={() => this.append(data)}></i>
            </div>
          </div>
        )
      }
    }
}
</script>
<style>
  #tree_wrap_org .card_wrap {
    display: flex;
  }

  #tree_wrap_org .card_item {
    box-sizing: border-box;
    padding: 16px 10px 10px 10px;
    width: 107px;
    height: 131px;
    border-radius: 8px;
    position: relative;
  }

  #tree_wrap_org .card_title {
    height: 85px;
    word-wrap: break-word;
    word-break: normal;
    white-space: normal;
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #FFFFFF;
    text-align: left;
  }

  #tree_wrap_org .circle_r {
    display: inline-block;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 1px solid #D3E0EE;
    border-radius: 50%;
    position: absolute;
    left: 16px;
    bottom: 10px;
    cursor: pointer;
    z-index: 2;
  }

  #tree_wrap_org .activeCard {
    border-width: 4px;
  }

  #tree_wrap_org .firstItem {
    background-color: #1BC5BD;
  }

  #tree_wrap_org .firstItem::after {
    content: "";
    background: url(/img/card-1.2af9f09a.svg) no-repeat right bottom;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  #tree_wrap_org .lastItem {
    background-color: #00CFE8;
  }

  #tree_wrap_org .lastItem::after {
    content: "";
    background: url(/img/card-2.577efdaf.svg) no-repeat right bottom;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  #tree_wrap_org .add_btn {
    line-height: 131px;
    font-size: 26px;
  }

  #tree_wrap_org .add {
    color: #4C6072;
    cursor: pointer;
    margin-left: 10px;
  }
</style>
<style lang="scss" scope>
#tree_wrap_org{
    width: 100%;
    height: 100%;
}
// org-tree样式
.org-tree-container {
  display: inline-block;
  padding: 15px;
  background-color: #fff;
}

.org-tree {
  display: table;
  text-align: center;

  &:before, &:after {
    content: '';
    display: table;
  }

  &:after {
    clear: both;
  }
}

.org-tree-node,
.org-tree-node-children {
  position: relative;
  margin: 0;
  padding: 0;
  list-style-type: none;

  &:before, &:after {
    transition: all .35s;
  }
}
.org-tree-node-label {
  position: relative;
  display: inline-block;

  .org-tree-node-label-inner {
    padding: 10px 15px;
    text-align: center;
    border-radius: 3px;
    //box-shadow: 0 1px 5px rgba(0, 0, 0, .15);
  }
}
.org-tree-node-btn {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 20px;
  height: 20px;
  z-index: 10;
  margin-left: -11px;
  margin-top: 9px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, .15);
  cursor: pointer;
  transition: all .35s ease;

  &:hover {
    background-color: #e7e8e9;
    transform: scale(1.15);
  }

  &:before, &:after {
    content: '';
    position: absolute;
  }

  &:before {
    top: 50%;
    left: 4px;
    right: 4px;
    height: 0;
    border-top: 1px solid #ccc;
  }

  &:after {
    top: 4px;
    left: 50%;
    bottom: 4px;
    width: 0;
    border-left: 1px solid #ccc;
  }

  &.expanded:after {
    border: none;
  }
}
.org-tree-node {
  padding-top: 20px;
  display: table-cell;
  vertical-align: top;

  &.is-leaf, &.collapsed {
    padding-left: 10px;
    padding-right: 10px;
  }

  &:before, &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 19px;
  }

  &:after {
    left: 50%;
    border-left: 1px solid #ddd;
  }

  &:not(:first-child):before,
  &:not(:last-child):after {
    border-top: 1px solid #ddd;
  }

}
.collapsable .org-tree-node.collapsed {
  padding-bottom: 30px;

  .org-tree-node-label:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 50%;
    height: 20px;
    border-right: 1px solid #ddd;
  }
}
.org-tree > .org-tree-node {
  padding-top: 0;

  &:after {
    border-left: 0;
  }
}
.org-tree-node-children {
  padding-top: 20px;
  display: table;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 20px;
    border-left: 1px solid #ddd;
  }

  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

.horizontal {
  .org-tree-node {
    display: table-cell;
    float: none;
    padding-top: 0;
    padding-left: 20px;

    &.is-leaf, &.collapsed {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    &:before, &:after {
      width: 19px;
      height: 50%;
    }

    &:after {
      top: 50%;
      left: 0;
      border-left: 0;
    }

    &:only-child:before {
      top: 1px;
      border-bottom: 1px solid #ddd;
    }

    &:not(:first-child):before,
    &:not(:last-child):after {
      border-top: 0;
      border-left: 1px solid #ddd;
    }

    &:not(:only-child):after {
      border-top: 1px solid #ddd;
    }

    .org-tree-node-inner {
      display: table;
    }

  }

  .org-tree-node-label {
    display: table-cell;
    vertical-align: middle;
  }

  &.collapsable .org-tree-node.collapsed {
    padding-right: 30px;

    .org-tree-node-label:after {
      top: 0;
      left: 100%;
      width: 20px;
      height: 50%;
      border-right: 0;
      border-bottom: 1px solid #ddd;
    }
  }

  .org-tree-node-btn {
    top: 50%;
    left: 100%;
    margin-top: -11px;
    margin-left: 9px;
  }

  & > .org-tree-node:only-child:before {
    border-bottom: 0;
  }

  .org-tree-node-children {
    display: table-cell;
    padding-top: 0;
    padding-left: 20px;

    &:before {
      top: 50%;
      left: 0;
      width: 20px;
      height: 0;
      border-left: 0;
      border-top: 1px solid #ddd;
    }

    &:after {
      display: none;
    }

    & > .org-tree-node {
      display: block;
    }
  }
}
</style>

结语

直接复制就可以用，这篇文章对你有帮助的话，记得点赞哦！