簡介
安裝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ù) |
說明 |
類型 |
可選值 |
默認(rèn)值 |
| treeData |
tree樹形控件數(shù)據(jù) |
Object |
請參考下面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í)候才會展開或者收縮節(jié)點(diǎn) |
Boolean |
— |
true |
| auto-expand-parent |
展開子節(jié)點(diǎn)的時(shí)候是否自動展開父節(jié)點(diǎn) |
Boolean |
— |
true |
| node-key |
每個(gè)樹節(jié)點(diǎn)用來作為唯一標(biāo)識的屬性，整顆樹應(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 |
相鄰級節(jié)點(diǎn)間的水平縮進(jìn)，單位為像素 |
Number |
— |
16 |
| tree |
tree |
Object |
— |
— |
| tree |
tree |
Object |
— |
— |
TreeData Attributes 數(shù)據(jù)屬性
| 參數(shù) |
說明 |
類型 |
可選值 |
默認(rèn)值 |
| treeData |
tree樹形控件件數(shù)據(jù) ,扁平化數(shù)據(jù) |
Array |
— |
— |
| treeRelation |
tree樹形控件件父子數(shù)據(jù)關(guān)系 |
Object |
— |
— |
TreeRelation Attributes 父子數(shù)據(jù)關(guān)系屬性
| 參數(shù) |
說明 |
類型 |
可選值 |
默認(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方法
| 方法名 |
說明 |
參數(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 |
通過 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 |
通過 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 事件
| 事件名稱 |
說明 |
回調(diào)參數(shù) |
| node-click |
節(jié)點(diǎn)被點(diǎn)擊時(shí)的回調(diào) |
共三個(gè)參數(shù)睦番，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對應(yīng)的對象类茂、節(jié)點(diǎn)對應(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 對象 |
| node-expand |
節(jié)點(diǎn)被展開時(shí)觸發(fā)的事件 |
共三個(gè)參數(shù)示启，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對應(yīng)的對象兢哭、節(jié)點(diǎn)對應(yīng)的 Node、節(jié)點(diǎn)組件本身夫嗓。 |
| node-collapse |
節(jié)點(diǎn)被關(guān)閉時(shí)觸發(fā)的事件 |
共三個(gè)參數(shù)厦瓢，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對應(yīng)的對象、節(jié)點(diǎn)對應(yīng)的 Node啤月、節(jié)點(diǎn)組件本身。 |
