Ant?Design?of?Vue的樹形控件Tree的使用及說明
基本使用
配置項(xiàng)
replaceFields
數(shù)據(jù)渲染屬性依賴3個字段：
titlekeychildren
沒有其他可攜帶的用戶數(shù)據(jù)
對接實(shí)際后臺返回的數(shù)據(jù)，很多時候不是直接的title、key可以讓我們直接渲染，這個時候replaceFields 就派上了用場。
舉栗：
:replaceFields="{ title: 'buildingName', key: 'buildingId' }"這里的buildingName作為title渲染，buildingId作為key
需要注意的是：設(shè)置為key的字段，一定要確保它的唯一性哦?。?！
treeData
樹節(jié)點(diǎn)渲染的數(shù)據(jù)
兩種方法設(shè)置：
- 1、手動構(gòu)造
const treeData = [
{
title: '0-0',
key: '0-0',
children: [
{
title: '0-0-0',
key: '0-0-0',
children: [
{ title: '0-0-0-0', key: '0-0-0-0' },
{ title: '0-0-0-1', key: '0-0-0-1' },
{ title: '0-0-0-2', key: '0-0-0-2' },
],
},
{
title: '0-0-1',
key: '0-0-1',
children: [
{ title: '0-0-1-0', key: '0-0-1-0' },
{ title: '0-0-1-1', key: '0-0-1-1' },
{ title: '0-0-1-2', key: '0-0-1-2' },
],
},
],
},
];
- 2、返回的接口數(shù)據(jù)構(gòu)造
在這里呢，同樣有兩種情況，子樹的數(shù)據(jù)
- ①同一個接口獲取
這里建議使用控件里面的異步加載loadData，詳細(xì)介紹請移步配置項(xiàng)介紹處。
實(shí)現(xiàn)方式是：進(jìn)入頁面即調(diào)用getTree的方法，拿到主樹的數(shù)據(jù)，其后每展開一層就會調(diào)用它的onLoadData方法，構(gòu)造子樹數(shù)據(jù)作為children放在主樹對應(yīng)的節(jié)點(diǎn)下。
舉栗：
:load-data="onLoadData"
// 獲取部門樹
getTree() {
classTree()
.then((res) => {
if (res.data.code == '200') {
let data = res.data.result.treeobject;
if (!this.defaultSelectedkeys.length) {
this.defaultSelectedkeys.push(data.buildingId);
}
let obj = {
title: data.buildingName,
key: data.buildingId,
};
this.treeData.push(obj);
} else {
this.loading = false;
}
})
.catch(() => {
this.loading = false;
});
},
//異步加載樹形數(shù)據(jù)
onLoadData(treeNode) {
return new Promise((resolve) => {
if (treeNode.dataRef.children) {
resolve();
return;
}
const { current, pageSize } = this.pagination;
let child = [];
childList(current, pageSize, treeNode.dataRef.key).then((res) => {
if (res.data.code == '200') {
res.data.result.listobject.forEach((item, index) => {
let obj = {};
obj = {
title: item.buildingName,
key: item.buildingId,
};
child.push(obj);
});
treeNode.dataRef.children = child;
this.treeData = [...this.treeData];
resolve();
}
});
});
},
- ②多個接口獲取
這里需要配合select事件完成，詳細(xì)介紹請移步配置項(xiàng)介紹處。
需要注意的是：不同于從同一個接口獲取子樹數(shù)據(jù)：數(shù)據(jù)在一張表中，key的值可以確保唯一性，多個接口獲取key的唯一性需要保證，我這邊是和后臺約定了一個字段作為標(biāo)識：它由本身id加上前綴字母組成，這樣我們拿到的時候把它做一下處理既能知道它具體的哪個層級的數(shù)據(jù)，還能根據(jù)它的id繼續(xù)查找子樹。
實(shí)現(xiàn)方式是：初始化渲染 getTree方法，加載主樹。選中的樹節(jié)點(diǎn)會調(diào)用_select方法，查到下一級的子樹數(shù)據(jù)并添加至對應(yīng)節(jié)點(diǎn)處。每次進(jìn)入_select方法都會先判斷具體是哪一層的子樹，然后再拿著id去查找下級作為子樹數(shù)據(jù)。
// 樹形結(jié)構(gòu)選中項(xiàng)
_select(e, node) {
if (!e.length) {
return;
}
//第二層
if (e[0].includes('B')) {
//保存id，方便找到需要添加子樹的位置
this.a = e[0].substring(1);
let data1 = {
curPage: current,
pageSize: 1000,
orderDirection,
orderFieldName,
buildingId: e[0].substring(1),
};
floorList(data1).then((res) => {
if (res.data.code == '200') {
let children1 = [];
res.data.result.pageobject.content.forEach((item1, index1) => {
//構(gòu)造數(shù)據(jù)時注意整棵樹的title、key一旦被替換就只能渲染替換后字段的數(shù)據(jù)
let obj = {
buildingName: item1.floorName,
buildingId: item1.floorCode,
};
this.$set(children1, item1.floorId, obj);
});
this.$set(this.treeData2[this.a], 'children', children1);
}
});
//第三層
} else if (e[0].includes('f')) {
this.b = e[0].substring(1);
let data2 = {
curPage: current,
pageSize: 1000,
orderDirection,
orderFieldName,
floorId: e[0].substring(1),
};
roomList(data2).then((res) => {
if (res.data.code == '200') {
let children2 = [];
res.data.result.pageobject.content.forEach((item2, index2) => {
let obj = {
buildingName: item2.roomName,
buildingId: item2.roomCode,
};
children2.push(obj);
});
this.$set(this.treeData2[this.a].children[this.b], 'children', children2);
}
});
//第四層（最后一層的葉子節(jié)點(diǎn)，整棵樹構(gòu)造完成，我們根據(jù)它的id調(diào)取展示數(shù)據(jù)，用表格展示）
} else if (e[0].includes('r')) {
let data3 = {
curPage: current,
pageSize: 1000,
orderDirection,
orderFieldName,
roomId: e[0].substring(1),
};
bedList(data3).then((res) => {
if (res.data.code =='200') {
this.tableData = res.data.result.pageobject.content;
}
});
}
},
defaultSelectedKeys
默認(rèn)選中的樹節(jié)點(diǎn)
是一個數(shù)組對象，多在select方法中被賦值
在獲取某個樹節(jié)點(diǎn)的數(shù)據(jù)時很好用
loadData
異步加載數(shù)據(jù)
樹本身的結(jié)構(gòu)比較深，在構(gòu)造數(shù)據(jù)時困難之處就在于獲取的數(shù)據(jù)不知道要作為哪層的子樹數(shù)據(jù)。
loadData方法就幫助我們解決了這個難題，它的回調(diào)里面有node，當(dāng)前的節(jié)點(diǎn)。treeNode.dataRef包含當(dāng)前節(jié)點(diǎn)的title、key、children，這樣我們在loadData里面獲取子樹數(shù)據(jù)后就不用苦惱該給哪層的父節(jié)點(diǎn)添加了。
isLeaf
- 葉子節(jié)點(diǎn)
在數(shù)據(jù)處理時，我們可以根據(jù)返回的數(shù)據(jù)中的某個字段，來設(shè)置它是否為葉子節(jié)點(diǎn)。
設(shè)置葉子節(jié)點(diǎn)是為了更好的展示節(jié)點(diǎn)前的展開標(biāo)識。
showLine
- 連接線
默認(rèn)情況下，樹節(jié)點(diǎn)的展開和關(guān)閉是由下三角和右三角作為展示的
舉栗：
如果我們不想使用默認(rèn)的標(biāo)識，就可以配置show-line屬性
舉栗：
由+、-標(biāo)識展開收縮
如果不喜歡默認(rèn)的圖標(biāo)，可以自定義展開收縮圖標(biāo)
舉栗：
<a-icon slot="switcherIcon" type="home" theme="filled" />
比較好玩的就是你設(shè)置的圖標(biāo)在收縮狀態(tài)的朝向左邊的，展開后位置歸正
showIcon
舉栗：
<a-icon slot="smile" type="smile-o" />
treeData = [
{
title: 'parent 1',
key: '0-0',
slots: {
icon: 'smile',
},
children: [
{ title: 'leaf', key: '0-0-0', slots: { icon: 'meh' } },
{ title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'custom' } },
],
},
];
事件
expand
在默認(rèn)展開某些指定節(jié)點(diǎn)時適用
舉栗：添加這兩項(xiàng)配置:expanded-keys="expandedKeys" @expand="onExpand"
// 展開樹形結(jié)構(gòu)
onExpand(expandedKeys) {
//expandedKeys是被展開節(jié)點(diǎn)的key組成的數(shù)組
let arr = expandedKeys.splice(-1);
this.expandedKeys = arr;
},
rightClick
響應(yīng)右鍵的點(diǎn)擊操作，回調(diào)里面提供事件對象event、節(jié)點(diǎn)node
select
響應(yīng)點(diǎn)擊樹節(jié)點(diǎn)操作，回調(diào)提供選中的樹節(jié)點(diǎn)的key、節(jié)點(diǎn)node
進(jìn)階使用
目錄樹
<template>
<a-directory-tree multiple default-expand-all @select="onSelect" @expand="onExpand">
<a-tree-node key="0-0" title="parent 0">
<a-tree-node key="0-0-0" title="leaf 0-0" is-leaf />
<a-tree-node key="0-0-1" title="leaf 0-1" is-leaf />
</a-tree-node>
<a-tree-node key="0-1" title="parent 1">
<a-tree-node key="0-1-0" title="leaf 1-0" is-leaf />
<a-tree-node key="0-1-1" title="leaf 1-1" is-leaf />
</a-tree-node>
</a-directory-tree>
</template>
<script>
export default {
methods: {
onSelect(keys, event) {
console.log('Trigger Select', keys, event);
},
onExpand() {
console.log('Trigger Expand');
},
},
};
</script>
右鍵菜單樹
<a-tree show-line class="draggable-tree" :load-data="onLoadData" :tree-data="treeData" :defaultSelectedKeys="defaultSelectedkeys" @select="_select">
//把key作為treeKey
<template #title="{ key: treeKey, title }">
<a-dropdown :trigger="['contextmenu']">
<span>{{ title }}</span>
<template #overlay>
<a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
<a-menu-item key="1">添加</a-menu-item>
<a-menu-item key="2">修改</a-menu-item>
<a-menu-item key="3">刪除</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
</a-tree>
//右鍵菜單
onContextMenuClick(treeKey, menuKey) {
//treeKey是被喚起右鍵菜單的樹節(jié)點(diǎn)的key，menuKey被點(diǎn)擊的右鍵菜單的key
this.treeKey = treeKey;
this.menuKey = menuKey;
if (menuKey == '1') {
this.title = '添加組織';
} else if (menuKey == '2') {
this.title = '修改組織';
} else {
this.title = '刪除組織';
}
},
可搜索的樹
最近沒有使用到，所以對這個了解不是很全面，詳細(xì)情況請?jiān)L問官網(wǎng)介紹，挺詳細(xì)的—>可搜索樹
高階使用
添加樹節(jié)點(diǎn)
配合右鍵菜單使用，右鍵菜單項(xiàng)：添加，點(diǎn)擊添加節(jié)點(diǎn)數(shù)據(jù)后，樹形的數(shù)據(jù)可以直接變化。
在添加樹節(jié)點(diǎn)的時候會遇到一個問題就是，添加好的數(shù)據(jù)作為哪個節(jié)點(diǎn)的子樹。
在樹形控件的方法里面，能用在這里可以提供node的是rightClick、select。
我們在右擊事件里面把節(jié)點(diǎn)存儲起來，這樣我們做右鍵菜單的操作的時候就能確定到底是哪個節(jié)點(diǎn)了。
舉栗：
// 響應(yīng)右鍵點(diǎn)擊
onrightClick({ node }) {
this.nodeobj = node;
},
目前有關(guān)樹形的操作涉及到的方面就上面這些了。
總而言之
操作樹，就是對對應(yīng)樹節(jié)點(diǎn)node做處理，知道node和key，就能完成大部分的樹操作了。
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)例中el和data的兩種寫法小結(jié)
這篇文章主要介紹了Vue實(shí)例中el和data的兩種寫法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)下拉菜單樹，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家介紹了vue pdf二次封裝解決無法顯示中文問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Vue組件間通信方法總結(jié)（父子組件、兄弟組件及祖先后代組件間）
這篇文章主要給大家介紹了關(guān)于Vue組件間通信的相關(guān)資料，其中包括父子組件、兄弟組件及祖先后代組件間的通信，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
文章總結(jié)：查看Vue項(xiàng)目中使用的Node版本,特別是當(dāng)項(xiàng)目使用Yarn和TypeScript時,可以通過查看yarn.lock文件中的@types/node@version來確定版本2025-01-01
在Vue 3中使用OpenLayers讀取WKB數(shù)據(jù)并顯示圖形效果
WKB作為一種緊湊的二進(jìn)制格式,在處理和傳輸空間數(shù)據(jù)時具有明顯優(yōu)勢,本文介紹了如何在Vue 3中使用OpenLayers讀取WKB格式的空間數(shù)據(jù)并顯示圖形,感興趣的朋友一起看看吧2024-12-12
antd?select?多選限制個數(shù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了antd?select?多選限制個數(shù),實(shí)現(xiàn)思路和核心代碼都很簡單，其中核心代碼在于disabled，代碼簡單易懂需要的朋友可以參考下2022-11-11
vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼
本文主要介紹了Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
v-bind 主要用于屬性綁定，比方你的class屬性，style屬性，value屬性，href屬性等等，只要是屬性，就可以用v-bind指令進(jìn)行綁定.這篇文章主要介紹了VueJs中的V-bind指令,需要的朋友可以參考下2018-05-05