最近公司項目(Vue
+ Element
)需求有用到 tree
,所以呢我去網上找了很多插件,都不是很符合我的要求。最後在GitHub上面找到了一款插件是 iview
的組織結構樹 vue-org-tree
,但是由於文檔不是特別易懂,自己踩了很多坑。不過定製性特別高,基本上會用到的方法都有了。所以今天來給大家講解下。
npm
# use npm
npm i vue2-org-tree
# use yarn
yarn add vue2-org-tree
安裝 loader
溫馨提示:不安裝less-loader基本上都會報錯
npm install --save-dev less less-loader
Import Plugins
import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'
Vue.use(Vue2OrgTree)
CDN
# css
<link href="https://unpkg.com/[email protected]/dist/style.css">
# js
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
簡單起步
老嚴這邊呢,就直接使用Vue-cli
起步了,vue-org-tree
安裝成功之後,我們就直接使用了,在Vue
頁面或者組件中使用vue2-org-tree
標籤,動態綁定data
基本創建
<vue2-org-tree :data="data"/>
data數據放入頁面中
id 每個元素不同的ID ,label爲name, children爲自己的子集數據
data: {
id: 0,
label: "XXX科技有限公司",
children: [
{
id: 2,
label: "產品研發部",
children: [
{
id: 5,
label: "研發-前端"
},
{
id: 6,
label: "研發-後端"
},
{
id: 9,
label: "UI設計"
},
{
id: 10,
label: "產品經理"
}
]
},
{
id: 3,
label: "銷售部",
children: [
{
id: 7,
label: "銷售一部"
},
{
id: 8,
label: "銷售二部"
}
]
},
{
id: 4,
label: "財務部"
},
{
id: 9,
label: "HR人事"
}
]
}
效果圖:
排列方式
剛剛我們看到的是默認排列方式 ,其實還有一種排列方式,我們一起來看看
水平排列
horizontal
是水平排列方式,我們來實踐一下吧,它的參數是true
、false
<vue2-org-tree
:data="data"
:horizontal="true"
/>
看看效果如何:
修改背景色
使用 label-class-name
我們還可以動態綁定自定義class
<vue2-org-tree
:data="data"
:horizontal="true"
:label-class-name="labelClassName"
/>
我們一起來嘗試一下吧!
js:
data() {
return {
labelClassName:"bg-color-orange"
}
}
css:
.bg-color-orange{
color: #fff;
background-color: orange;
}
警告⚠ :style
標籤裏不能加 scoped
不然自定義樣式無效
看看效果圖
摺疊展示
摺疊展示效果
<vue2-org-tree
:data="data"
:horizontal="true"
:label-class-name="labelClassName"
collapsable
/>
摺疊效果是有了,那麼怎麼展開呢?
<vue2-org-tree
:data="data"
:horizontal="true"
:label-class-name="labelClassName"
collapsable
@on-expand="onExpand"
/>
js:
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);
}
},
請看效果圖:
問題又來了,默認展開如何實現?
請看大屏幕
toggleExpand(data, val) {
var _this = this;
if (Array.isArray(data)) {
data.forEach(function(item) {
_this.$set(item, "expand", val);
if (item.children) {
_this.toggleExpand(item.children, val);
}
});
} else {
this.$set(data, "expand", val);
if (data.children) {
_this.toggleExpand(data.children, val);
}
}
}
在請求完數據之後直接調用,或者生命週期調用,可以自由發揮
第一個參數是你的資源data,第二個參數是全部展開或否
this.toggleExpand(this.data,true)
深入觀察
vue2-org-tree
向我們拋出了幾個事件,我們先看看有哪些事件
點擊事件
on-node-click
就是被拋出的點擊事件
<vue2-org-tree
:data="data"
@on-node-click="NodeClick"
/>
我們在方法裏面寫一個NodeClick用來接受點擊觸發的值
NodeClick(e,data){
console.log(e)
// e 爲 event
console.log(data)
// 當前項的所有詳情 如:id label children
}
打印結果:
// e 的打印
{
isTrusted: true
screenX: 720
screenY: 308
clientX: 720
clientY: 205
ctrlKey: false
shiftKey: false
altKey: false
metaKey: false
button: 0
buttons: 0
relatedTarget: null
pageX: 720
......
}
// data的打印
{
id: 2
label: "產品研發部"
children: Array(4)
}
移入移出
它還向我們拋出了移入移出事件,返回值與點擊事件大致相同
<vue2-org-tree
:data="data"
:horizontal="true"
:label-class-name="labelClassName"
collapsable
@on-expand="onExpand"
@on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout"
/>
拓展移入移出
來了老弟?我們做移入移出,肯定是要有功能的對不對?
每當我們的鼠標移入到小盒子裏就出現一個模態框用來展示data內容
<vue2-org-tree
:data="data"
:horizontal="true"
name="test"
:label-class-name="labelClassName"
collapsable
@on-expand="onExpand"
@on-node-mouseover="onMouseover"
@on-node-mouseout="onMouseout"
/>
<!-- 創建浮窗盒子 -->
<div v-show="BasicSwich" class="floating">
<p>ID:{{BasicInfo.id}}</p>
<p>Name:{{BasicInfo.label}}</p>
</div>
js:
// 聲明變量
data() {
return {
BasicSwich:false,
BasicInfo:{id:null,label:null}
}
}
// 方法
onMouseout(e, data) {
this.BasicSwich = false
},
onMouseover(e, data) {
this.BasicInfo = data;
this.BasicSwich = true;
var floating = document.getElementsByClassName('floating')[0];
floating.style.left = e.clientX +'px';
floating.style.top = e.clientY+'px';
},
css:
/* 盒子css */
.floating{
background: rgba(0, 0, 0, 0.7);
width: 160px;
height: 100px;
position: absolute;
color: #fff;
padding-top: 15px;
border-radius: 15px;
padding-left: 15px;
box-sizing: border-box;
left:0;
top: 0;
transition: all 0.3s;
z-index: 999;
text-align: left;
font-size: 12px;
}
上效果圖:
API
on-expand
鼠標點擊時調用它。
- params
e
Event
- params
data
Current node data
on-node-click
well be called when the node-label clicked
- params
e
Event
- params
data
Current node data
on-node-mouseover
當鼠標懸停時調用它。
- params
e
Event
- params
data
Current node data
on-node-mouseout
當鼠標離開時調用它。
- params
e
Event
- params
data
Current node data
最後附上Git地址:https://github.com/CrazyMrYan/vue2-org-tree
預覽地址:http://crazy.lovemysoul.vip/gitdemo/vue2-org-tree
關注“悲傷日記”更多精彩文章