vue-tree 組織架構圖/樹形圖自動生成(含添加、刪除、修改)

項目中用代碼生成組織架構圖有新增,編輯,刪除的功能

生成樹形圖的組件git-hub地址: https://github.com/tower1229/Vue-Tree-Chart 這個插件仍是很不錯的

建議把整個安裝包下載下來,寫成組件使用.這樣方便定製本身的業務需求

初始代碼:

<template>
    <table v-if="treeData.name">
      <tr>
        <td :colspan="treeData.children ? treeData.children.length * 2 : 1" :class="{parentLevel: treeData.children, extend: treeData.children && treeData.extend}">
          <div :class="{node: true, hasMate: treeData.mate}">
            <div class="person" @click="$emit('click-node', treeData)">
              <div class="avat">
                <img :src="treeData.image_url" />
              </div>
              <div class="name">{{treeData.name}}</div>
            </div>
            <div class="person" v-if="treeData.mate" @click="$emit('click-node', treeData.mate)">
              <div class="avat">
                <img :src="treeData.mate.image_url" />
              </div>
              <div class="name">{{treeData.mate.name}}</div>
            </div>
          </div>
          <div class="extend_handle" v-if="treeData.children" @click="toggleExtend(treeData)"></div>
        </td>
      </tr>
      <tr v-if="treeData.children && treeData.extend">
        <td v-for="(children, index) in treeData.children" :key="index" colspan="2" class="childLevel">
          <TreeChart :json="children" @click-node="$emit('click-node', $event)"/>
        </td>
      </tr>
    </table>
</template>

增長編輯功能,能夠與element-ui的el-popover彈出框組件一塊兒使用

<el-popover placement="top" width="180" trigger="hover">
  <div style="margin: 0">
    <el-button size="mini" type="primary" @click="addStock(0)" >新增</el-button>
    <el-button type="primary" size="mini" @click="addStock(1)">編輯</el-button>
    <el-button type="primary" size="mini" @click="dialogVisible2 = true" >刪除</el-button>
  </div>
  <div class="avat" slot="reference"> {{treeData.name}} </div>
</el-popover>

在網上找了好幾個插件,感受這個仍是比較好用的node

補充: 做者的樹形圖默認方向是由上向下,還提供了了切換爲豎行的方法.可是我本身的項目是須要樹形樣式,由上之上的效果,以下圖: 因此在原做者的代碼上修改了下,主要是樣式調整,有須要的能夠看一下git

<template>
    <table v-if="treeData.name">
      <tr v-if="treeData.children">
        <td v-for="(children, index) in treeData.children" :key="index" colspan="2" class="childLevel">
          <TreeChartOrder :json="children" @click-node="$emit('click-node', $event)"/>
        </td>
      </tr>
      <tr>
        <td :colspan="treeData.children ? treeData.children.length * 2 : 1" :class="{parentNode: treeData.children}">
          <div class="node">
            <div class="name">{{treeData.name}}</div>
          </div>
        </td>
      </tr>
    </table>
</template>

<script> export default { name: "TreeChartOrder", props: ["json"], data() { return { treeData: { name: 'root', image_url: "https://static.refined-x.com/avat.jpg", children: [ { name: 'children1', image_url: "https://static.refined-x.com/avat1.jpg" }, { name: 'children2', image_url: "https://static.refined-x.com/avat2.jpg", mate: { name: 'mate', image_url: "https://static.refined-x.com/avat3.jpg" }, children: [ { name: 'grandchild', image_url: "https://static.refined-x.com/avat.jpg" }, { name: 'grandchild2', image_url: "https://static.refined-x.com/avat1.jpg" }, { name: 'grandchild3', image_url: "https://static.refined-x.com/avat2.jpg" } ] }, { name: 'children3', image_url: "https://static.refined-x.com/avat.jpg" } ] } } }, watch: { json: { handler: function(Props){ let extendKey = function(jsonData){ jsonData.extend = (jsonData.extend===void 0 ? true: !!jsonData.extend); if(Array.isArray(jsonData.children)){ jsonData.children.forEach(c => { extendKey(c) }) } return jsonData; } if(Props){ this.treeData = extendKey(Props); } }, immediate: true } }, methods: { toggleExtend: function(treeData){ treeData.extend = !treeData.extend; this.$forceUpdate(); } } } </script>

<style scoped> table{border-collapse: separate!important;border-spacing: 0!important;} td{position: relative; vertical-align: bottom;padding:0 0 40px 0;text-align: center; } .parentNode::after {content: "";position: absolute;left:49.9%;top:-56px;height:30px;border-left:2px solid #ccc;} .childLevel::before{content: "";position: absolute;left:50%;bottom:57px;height:15px;border-left:2px solid #ccc;transform: translate3d(-1px,0,0)} .childLevel::after{content: "";position: absolute;left:0;right:0;bottom:55px;border-top:2px solid #ccc;} .childLevel:first-child:before, .childLevel:last-child:before{display: none;} .childLevel:first-child:after{left:50%;height:15px; border:2px solid;border-color:transparent transparent #ccc #ccc;border-radius: 6px 0 0 0;transform: translate3d(1px,0,0)} .childLevel:last-child:after{right:50%;height:15px; border:2px solid;border-color:transparent #ccc #ccc transparent;border-radius: 0 6px 0 0;transform: translate3d(-1px,0,0)} .childLevel:first-child.childLevel:last-child::after{left:auto;border-radius: 0;border-color:transparent #ccc transparent transparent;transform: translate3d(1px,0,0)} .node{position: relative; display: inline-block;width: 13em;box-sizing: border-box; text-align: center;} .node .person{position: relative; display: inline-block;z-index: 2;width:6em; overflow: hidden;} .node .avat{display: block;width:4em;height: 4em;margin:auto;overflow:hidden; background:#fff;border:1px solid #ccc;box-sizing: border-box;} .node .avat img{width:100%;height: 100%;} .node .name{height:2em;line-height: 2em;overflow: hidden;width:95%; background:#eee;border:1px solid #ccc;box-sizing: border-box;border-radius: 5px;} </style>

git-hup地址: https://github.com/shengbid/my-element 這個文件是平時練習的項目,裏面還有一些我寫的其餘博客的源碼,有須要能夠下載看看github