npm
# use npm
npm install vue-tree-color安裝loader
npm install --save-dev less less-loaderImport Plugins
import Vue from 'vue'
import Vue2OrgTree from 'vue-tree-color'
Vue.use(Vue2OrgTree)開始
因為已經安裝過了組件，所以可以直接使用，在vue頁面中，直接使用組件標簽，動態系結data資料（data資料為遞回資料即可）
<vue2-org-tree :data="data"/>data資料放入頁面中
其中，data資料中，id 每個元素不同的ID ，label為name， children為自己的子集資料
排列方式
剛才我們看到是默認排列方式，其實還有一種水平排列方式
# 只需要加上 horizontal 即可
<vue2-org-tree :data="data" :horizontal="true" />效果如下
折疊展示
添加一個屬性 collapsable
<vue2-org-tree :data="data" :horizontal="true" collapsable />
怎么展開呢，需要加一個組件自帶方法
on-expand
<vue2-org-tree :data="data" :horizontal="true" collapsable @on-expand="onExpand" />js部分
methods: {
collapse(list) {
var _this = this
list.forEach(function(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)
}
}
}效果如下
點擊節點
添加一個方法 on-node-click
<vue2-org-tree :data="data" :horizontal="true" collapsable @on-expand="onExpand" @on-node-click="onNodeHandle" />js
onNodeHandle(e, data) {
// e是節點資料
console.log(e)
// data是渲染在節點上的資料
console.log(data)
},列印結果
其他功能
組件還提供了其他功能，大概比較常用的還有，設定 節點 顏色 ，移入移出功能，等等，我把github地址粘貼進來，有興趣的可以自己了解
點擊下方鏈基即可查看組件更多功能
https://github.com/hukaibaihu/vue-org-tree#readme
本人原創，歡迎瀏覽，如果覺得還符合您的需求，麻煩點個贊哦，謝謝！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298673.html
標籤：其他
上一篇：上班遲到致失業，罪魁禍首在于這個 App 的 Bug！
下一篇：git branch分支管理思考