Ant?Design?of?Vue的樹形控件Tree的使用及說明
基本使用
配置項
replaceFields
數(shù)據(jù)渲染屬性依賴3個字段：
titlekeychildren
沒有其他可攜帶的用戶數(shù)據(jù)
對接實際后臺返回的數(shù)據(jù)，很多時候不是直接的title、key可以讓我們直接渲染，這個時候replaceFields 就派上了用場。
舉栗：
:replaceFields="{ title: 'buildingName', key: 'buildingId' }"這里的buildingName作為title渲染，buildingId作為key
需要注意的是：設(shè)置為key的字段，一定要確保它的唯一性哦！?。?/p>
treeData
樹節(jié)點渲染的數(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，詳細介紹請移步配置項介紹處。
實現(xiàn)方式是：進入頁面即調(diào)用getTree的方法，拿到主樹的數(shù)據(jù)，其后每展開一層就會調(diào)用它的onLoadData方法，構(gòu)造子樹數(shù)據(jù)作為children放在主樹對應(yīng)的節(jié)點下。
舉栗：
: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事件完成，詳細介紹請移步配置項介紹處。
需要注意的是：不同于從同一個接口獲取子樹數(shù)據(jù)：數(shù)據(jù)在一張表中，key的值可以確保唯一性，多個接口獲取key的唯一性需要保證，我這邊是和后臺約定了一個字段作為標識：它由本身id加上前綴字母組成，這樣我們拿到的時候把它做一下處理既能知道它具體的哪個層級的數(shù)據(jù)，還能根據(jù)它的id繼續(xù)查找子樹。
實現(xiàn)方式是：初始化渲染 getTree方法，加載主樹。選中的樹節(jié)點會調(diào)用_select方法，查到下一級的子樹數(shù)據(jù)并添加至對應(yīng)節(jié)點處。每次進入_select方法都會先判斷具體是哪一層的子樹，然后再拿著id去查找下級作為子樹數(shù)據(jù)。
// 樹形結(jié)構(gòu)選中項
_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é)點，整棵樹構(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
默認選中的樹節(jié)點
是一個數(shù)組對象，多在select方法中被賦值
在獲取某個樹節(jié)點的數(shù)據(jù)時很好用
loadData
異步加載數(shù)據(jù)
樹本身的結(jié)構(gòu)比較深，在構(gòu)造數(shù)據(jù)時困難之處就在于獲取的數(shù)據(jù)不知道要作為哪層的子樹數(shù)據(jù)。
loadData方法就幫助我們解決了這個難題，它的回調(diào)里面有node，當前的節(jié)點。treeNode.dataRef包含當前節(jié)點的title、key、children，這樣我們在loadData里面獲取子樹數(shù)據(jù)后就不用苦惱該給哪層的父節(jié)點添加了。
isLeaf
- 葉子節(jié)點
在數(shù)據(jù)處理時，我們可以根據(jù)返回的數(shù)據(jù)中的某個字段，來設(shè)置它是否為葉子節(jié)點。
設(shè)置葉子節(jié)點是為了更好的展示節(jié)點前的展開標識。
showLine
- 連接線
默認情況下，樹節(jié)點的展開和關(guān)閉是由下三角和右三角作為展示的
舉栗：
如果我們不想使用默認的標識，就可以配置show-line屬性
舉栗：
由+、-標識展開收縮
如果不喜歡默認的圖標，可以自定義展開收縮圖標
舉栗：
<a-icon slot="switcherIcon" type="home" theme="filled" />
比較好玩的就是你設(shè)置的圖標在收縮狀態(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
在默認展開某些指定節(jié)點時適用
舉栗：添加這兩項配置:expanded-keys="expandedKeys" @expand="onExpand"
// 展開樹形結(jié)構(gòu)
onExpand(expandedKeys) {
//expandedKeys是被展開節(jié)點的key組成的數(shù)組
let arr = expandedKeys.splice(-1);
this.expandedKeys = arr;
},
rightClick
響應(yīng)右鍵的點擊操作，回調(diào)里面提供事件對象event、節(jié)點node
select
響應(yīng)點擊樹節(jié)點操作，回調(diào)提供選中的樹節(jié)點的key、節(jié)點node
進階使用
目錄樹
<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é)點的key，menuKey被點擊的右鍵菜單的key
this.treeKey = treeKey;
this.menuKey = menuKey;
if (menuKey == '1') {
this.title = '添加組織';
} else if (menuKey == '2') {
this.title = '修改組織';
} else {
this.title = '刪除組織';
}
},
可搜索的樹
最近沒有使用到，所以對這個了解不是很全面，詳細情況請訪問官網(wǎng)介紹，挺詳細的—>可搜索樹
高階使用
添加樹節(jié)點
配合右鍵菜單使用，右鍵菜單項：添加，點擊添加節(jié)點數(shù)據(jù)后，樹形的數(shù)據(jù)可以直接變化。
在添加樹節(jié)點的時候會遇到一個問題就是，添加好的數(shù)據(jù)作為哪個節(jié)點的子樹。
在樹形控件的方法里面，能用在這里可以提供node的是rightClick、select。
我們在右擊事件里面把節(jié)點存儲起來，這樣我們做右鍵菜單的操作的時候就能確定到底是哪個節(jié)點了。
舉栗：
// 響應(yīng)右鍵點擊
onrightClick({ node }) {
this.nodeobj = node;
},
目前有關(guān)樹形的操作涉及到的方面就上面這些了。
總而言之
操作樹，就是對對應(yīng)樹節(jié)點node做處理，知道node和key，就能完成大部分的樹操作了。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
ESLint是一個代碼檢查工具,用來檢查你的代碼是否符合指定的規(guī)范,下面這篇文章主要給大家介紹了關(guān)于Vue項目中ESLint配置(VScode)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
組件(Component)是 Vue.js 最強大的功能之一,組件可以擴展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于Vue封裝全局toast組件,需要的朋友可以參考下2021-07-07
本文主要介紹了vue.js實現(xiàn)綁定class和style樣式的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了基于vue如何發(fā)布一個npm包的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
element?UI中el-dialog實現(xiàn)拖拽功能示例代碼
我們在開發(fā)中常會遇見拖拽的功能,下面這篇文章主要給大家介紹了關(guān)于element?UI中el-dialog實現(xiàn)拖拽功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue中的style樣式如何動態(tài)綁定，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+springboot實現(xiàn)圖形驗證碼Kaptcha的示例
圖形驗證碼是做網(wǎng)站常用的功能,本文主要介紹了vue+springboot實現(xiàn)圖形驗證碼Kaptcha的示例,具有一定的參考價值,感興趣的可以了解一下2023-11-11
下拉框一開始請求第一頁的內(nèi)容,滾動到最后的時候,請求第二頁的內(nèi)容,如此反復,直到所有數(shù)據(jù)加載完成,這篇文章主要介紹了vue3如何利用自定義指令實現(xiàn)下拉框分頁懶加載,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了談?wù)勎以趘ue-cli3中用預(yù)渲染遇到的坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)表單單獨移除一個字段驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03