簡(jiǎn)介
安裝zt-ui依賴的包
npm install vue -S
npm install vue-router -S
npm install element-ui -S
或
cnpm install vue -S
cnpm install vue-router -S
cnpm install element-ui -S
安裝zt-ui
npm install zt-ui -S
或者
cnpm install zt-ui -S
引用引zt-ui包
// 引zt-ui包
// 我們的zt-ui也提供了按需引包
import { ZtTable } from 'zt-ui';
Vue.use(ZtTable);
ZtTree Attributes組件屬性
| 參數(shù) |
說(shuō)明 |
類型 |
可選值 |
默認(rèn)值 |
| treeData |
tree樹形控件數(shù)據(jù) |
Object |
請(qǐng)參考下面TreeData Attributes |
— |
| empty-text |
內(nèi)容為空的時(shí)候展示的文本 |
String |
— |
— |
| highlightCurrent |
是否高亮當(dāng)前選中節(jié)點(diǎn) |
Boolean |
— |
false |
| default-expand-all |
是否默認(rèn)展開所有節(jié)點(diǎn) |
Boolean |
— |
false |
| expand-on-click-node |
是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候展開或者收縮節(jié)點(diǎn)， 默認(rèn)值為 true，如果為 false，則只有點(diǎn)箭頭圖標(biāo)的時(shí)候才會(huì)展開或者收縮節(jié)點(diǎn) |
Boolean |
— |
true |
| auto-expand-parent |
展開子節(jié)點(diǎn)的時(shí)候是否自動(dòng)展開父節(jié)點(diǎn) |
Boolean |
— |
true |
| node-key |
每個(gè)樹節(jié)點(diǎn)用來(lái)作為唯一標(biāo)識(shí)的屬性，整顆樹應(yīng)該是唯一的 |
String |
— |
— |
| default-expanded-keys |
默認(rèn)展開的節(jié)點(diǎn)的 key 的數(shù)組,與node-key結(jié)合使用 |
Array |
— |
— |
| show-checkbox |
節(jié)點(diǎn)是否可被選擇 |
Boolean |
— |
false |
| check-strictly |
在顯示復(fù)選框的情況下，是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法 |
Boolean |
— |
false |
| indent |
相鄰級(jí)節(jié)點(diǎn)間的水平縮進(jìn)，單位為像素 |
Number |
— |
16 |
| tree |
tree |
Object |
— |
— |
| tree |
tree |
Object |
— |
— |
TreeData Attributes 數(shù)據(jù)屬性
| 參數(shù) |
說(shuō)明 |
類型 |
可選值 |
默認(rèn)值 |
| treeData |
tree樹形控件件數(shù)據(jù) ,扁平化數(shù)據(jù) |
Array |
— |
— |
| treeRelation |
tree樹形控件件父子數(shù)據(jù)關(guān)系 |
Object |
— |
— |
TreeRelation Attributes 父子數(shù)據(jù)關(guān)系屬性
| 參數(shù) |
說(shuō)明 |
類型 |
可選值 |
默認(rèn)值 |
| id |
數(shù)據(jù)里的id |
String |
— |
— |
| pid |
數(shù)據(jù)里的父id |
String |
— |
— |
| children |
生成結(jié)果中子節(jié)點(diǎn)的字段名 |
String |
— |
— |
| showData |
tree展示字段 |
String |
— |
— |
treeData:{
treeData:[
{id: 6, parent_id: 2,showData:'在tree顯示的內(nèi)容', data: '這是其他數(shù)據(jù)'},
{id: 7, parent_id: 3, showData:'在tree顯示的內(nèi)容',data: '這是其他數(shù)據(jù)'},
{id: 2, parent_id: 1, showData:'在tree顯示的內(nèi)容',data: '這是其他數(shù)據(jù)'},
{id: 4, parent_id: 2, showData:'在tree顯示的內(nèi)容',data: '這是其他數(shù)據(jù)'},
{id: 1, parent_id: 0, showData:'在tree顯示的內(nèi)容',data: '這是其他數(shù)據(jù)'},
{id: 9, parent_id: 5, showData:'在tree顯示的內(nèi)容',data: '這是其他數(shù)據(jù)'},
{id: 8, parent_id: 3, showData:'在tree顯示的內(nèi)容',data: '這是其他數(shù)據(jù)'},
{id: 3, parent_id: 1, showData:'在tree顯示的內(nèi)容',data: '這是其他數(shù)據(jù)'},
{id: 5, parent_id: 2, showData:'在tree顯示的內(nèi)容',data: '這是其他數(shù)據(jù)'},
{id: 10, parent_id:6, showData:'在tree顯示的內(nèi)容',data: '這是其他數(shù)據(jù)'}
]
treeRelation:{
id: 'id',
pid: 'parent_id',
children: 'kids',
showData:'showData'
}
上面的扁平化數(shù)據(jù)最終轉(zhuǎn)化成以下樹形json數(shù)據(jù)
[
{
"id": 1,
"parent_id": 0,
"data": "這是其他數(shù)據(jù)",
'showData': '在tree顯示的內(nèi)容',
"kids": [
{
"id": 2,
"parent_id": 1,
"data": "這是其他數(shù)據(jù)",
'showData': '在tree顯示的內(nèi)容',
"kids": [
{
"id": 6,
"parent_id": 2,
"data": "這是其他數(shù)據(jù)",
'showData': '在tree顯示的內(nèi)容',
"kids": [
{
"id": 10,
"parent_id": 6,
"data": "這是其他數(shù)據(jù)",
'showData': '在tree顯示的內(nèi)容',
}
]
},
{
"id": 4,
"parent_id": 2,
"data": "這是其他數(shù)據(jù)",
'showData': '在tree顯示的內(nèi)容',
},
{
"id": 5,
"parent_id": 2,
"data": "這是其他數(shù)據(jù)",
'showData': '在tree顯示的內(nèi)容',
"kids": [
{
"id": 9,
"parent_id": 5,
"data": "這是其他數(shù)據(jù)",
'showData': '在tree顯示的內(nèi)容',
}
]
}
]
},
{
"id": 3,
"parent_id": 1,
"data": "這是其他數(shù)據(jù)",
'showData': '在tree顯示的內(nèi)容',
"kids": [
{
"id": 7,
"parent_id": 3,
"data": "這是其他數(shù)據(jù)",
'showData': '在tree顯示的內(nèi)容',
},
{
"id": 8,
"parent_id": 3,
"data": "這是其他數(shù)據(jù)",
'showData': '在tree顯示的內(nèi)容',
}
]
}
]
}
]
上面的扁平化數(shù)據(jù)最終轉(zhuǎn)化成以下樹形json數(shù)據(jù)呈現(xiàn)的樣式
扁平化數(shù)據(jù)最終轉(zhuǎn)化成以下樹形json數(shù)據(jù)呈現(xiàn)的樣式
Tree方法
| 方法名 |
說(shuō)明 |
參數(shù) |
| getCheckedNodes |
若節(jié)點(diǎn)可被選擇（即 show-checkbox 為 true），則返回目前被選中的節(jié)點(diǎn)所組成的數(shù)組 |
(leafOnly) 接收一個(gè) boolean 類型的參數(shù)，若為 true 則僅返回被選中的葉子節(jié)點(diǎn)，默認(rèn)值為 false |
| setCheckedNodes |
設(shè)置目前勾選的節(jié)點(diǎn)，使用此方法必須設(shè)置 node-key 屬性 |
(nodes) 接收勾選節(jié)點(diǎn)數(shù)據(jù)的數(shù)組 |
| getCheckedKeys |
若節(jié)點(diǎn)可被選擇（即 show-checkbox 為 true），則返回目前被選中的節(jié)點(diǎn)所組成的數(shù)組 |
(leafOnly) 接收一個(gè) boolean 類型的參數(shù)，若為 true 則僅返回被選中的葉子節(jié)點(diǎn)的 keys，默認(rèn)值為 false |
| setCheckedKeys |
通過(guò) keys 設(shè)置目前勾選的節(jié)點(diǎn)，使用此方法必須設(shè)置 node-key 屬性 |
(keys, leafOnly) 接收兩個(gè)參數(shù)，1. 勾選節(jié)點(diǎn)的 key 的數(shù)組 2. boolean 類型的參數(shù)，若為 true 則僅設(shè)置葉子節(jié)點(diǎn)的選中狀態(tài)，默認(rèn)值為 false |
| setChecked |
通過(guò) key / data 設(shè)置某個(gè)節(jié)點(diǎn)的勾選狀態(tài)，使用此方法必須設(shè)置 node-key 屬性 |
(key/data, checked, deep) 接收三個(gè)參數(shù)，1. 勾選節(jié)點(diǎn)的 key 或者 data 2. boolean 類型，節(jié)點(diǎn)是否選中 3. boolean 類型，是否設(shè)置子節(jié)點(diǎn) ，默認(rèn)為 false |
ZtTree Events 事件
| 事件名稱 |
說(shuō)明 |
回調(diào)參數(shù) |
| node-click |
節(jié)點(diǎn)被點(diǎn)擊時(shí)的回調(diào) |
共三個(gè)參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對(duì)應(yīng)的對(duì)象、節(jié)點(diǎn)對(duì)應(yīng)的 Node、節(jié)點(diǎn)組件本身。 |
| current-change |
當(dāng)前選中節(jié)點(diǎn)變化時(shí)觸發(fā)的事件 |
共兩個(gè)參數(shù)，依次為：當(dāng)前節(jié)點(diǎn)的數(shù)據(jù)，當(dāng)前節(jié)點(diǎn)的 Node 對(duì)象 |
| node-expand |
節(jié)點(diǎn)被展開時(shí)觸發(fā)的事件 |
共三個(gè)參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對(duì)應(yīng)的對(duì)象、節(jié)點(diǎn)對(duì)應(yīng)的 Node、節(jié)點(diǎn)組件本身。 |
| node-collapse |
節(jié)點(diǎn)被關(guān)閉時(shí)觸發(fā)的事件 |
共三個(gè)參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對(duì)應(yīng)的對(duì)象、節(jié)點(diǎn)對(duì)應(yīng)的 Node、節(jié)點(diǎn)組件本身。 |
