Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹(shù)狀結(jié)構(gòu)
一、簡(jiǎn)介
效果展示：
應(yīng)用場(chǎng)景是這樣的：后臺(tái)給我返回的數(shù)據(jù)是處理好層級(jí)的數(shù)據(jù)，包含關(guān)系是通過(guò)數(shù)據(jù)里的children屬性。
舉個(gè)例子：
{
label: '汽車',
value: 'car',
children: [
{
label: '大眾',
value: 'das'
},
{
label: '豐田',
value: 'Toyota'
}
]
}
大體就是這種類型的數(shù)據(jù)，但是，問(wèn)題是數(shù)據(jù)量特別大，有上萬(wàn)條；而且層級(jí)數(shù)不固定，層數(shù)可能很多。
最開(kāi)始拿到這個(gè)問(wèn)題的時(shí)候，我用的是element組件庫(kù)的el-tree，因?yàn)閑l-tree很容易上手，而且也支持這種多層數(shù)據(jù)的展示，還可以添加checkbox等等，完全可以滿足功能要求。
但是用el-tree實(shí)現(xiàn)之后，發(fā)現(xiàn)渲染時(shí)間有時(shí)長(zhǎng)達(dá)十秒，而且經(jīng)常瀏覽器卡死，最后不得不放棄el-tree組件，替換其他性能更好的樹(shù)形結(jié)構(gòu)組件。
二、引入z-tree
1、引入方法（Vue中）
<div class="ztree-wrap"> <ul id="treeZyType" ref="ztree" class="ztree"></ul> </div>
import "@/components/Ztree/js/jquery-1.4.4.min.js" import "@/components/Ztree/js/jquery.ztree.core.js" import "@/components/Ztree/js/jquery.ztree.excheck.js"
// source是從后臺(tái)獲取的數(shù)據(jù)，層級(jí)結(jié)構(gòu)已經(jīng)處理好。
jsonToTree(source) {
var setting = {
check: {
enable: true,
chkboxType: { "Y": "", "N": "s" }
},
data: {
key: {
name: "name"
},
simpleData: {
enable: false,
idKey: "id",
pIdKey: "parentId",
rootPId: null
}
},
view: {
fontCss: {size: "20px"}
}
};
$.fn.zTree.init($("#treeZyType"), setting, source);
}
<style lang="scss" scoped>
@import url("../../components/Ztree/css/zTreeStyle/zTreeStyle.css");
</style>
注意：
- 由于z-tree依賴于Jqurey，所以需要同時(shí)引入Jquery。
- 為了避免版本變更帶來(lái)的bug，我把z-tree組件放到了component中。chkboxType: { “Y”: “”, “N”: “s” }屬性用來(lái)設(shè)置checkbox的關(guān)聯(lián)關(guān)系。
- 具體查看官網(wǎng)z-tree的樣式也要引入進(jìn)來(lái)
2、下載：
https://www.treejs.cn/v3/main.php#_zTreeInfo
3、擴(kuò)展（使用自定義圖標(biāo)）：
由于我展示鎖定和非鎖定的狀態(tài)，所以我用了自定義的圖標(biāo)。
改寫(xiě)的位置在jquery.ztree.core.js文件下，makeNodeIcoStyle函數(shù)。
makeNodeIcoStyle: function (setting, node) {
var icoStyle = [];
if (!node.isAjaxing) {
var isParent = data.nodeIsParent(setting, node);
var icon = (isParent && node.iconOpen && node.iconClose) ? (node.open ? node.iconOpen : node.iconClose) : node[setting.data.key.icon];
if (icon) {
icoStyle.push("background:url(", icon, ") 0 0 no-repeat;");
} else {
// 判斷數(shù)據(jù)屬性，根據(jù)屬性使用特定圖標(biāo)
if (node.lockStatus === 1) {
icoStyle.push("background:url(", "/img/lock.png", ") 0 0 no-repeat;");
} else if (node.lockStatus === 0 || node.lockStatus === 3){
icoStyle.push("background:url(", "/img/unlock.png", ") 0 0 no-repeat;");
}
}
if (setting.view.showIcon == false || !tools.apply(setting.view.showIcon, [setting.treeId, node], true)) {
icoStyle.push("width:0px;height:0px;");
}
}
return icoStyle.join('');
},
三、z-tree中的原生方法
1、折疊和展開(kāi)
// 獲取到z-tree對(duì)象
const zTree = $.fn.zTree.getZTreeObj("treeZyType");
// state為折疊展開(kāi)狀態(tài)，true為展開(kāi)，false為折疊。
zTree.expandAll(state);
2、checkbox狀態(tài)下的全選
// 獲取到z-tree對(duì)象
const zTree = $.fn.zTree.getZTreeObj("treeZyType");
// state為選中狀態(tài)，true為全選，false為取消全選。
zTree.checkAllNodes(state);
3、獲取選中的節(jié)點(diǎn)
// 獲取到z-tree對(duì)象
const zTree = $.fn.zTree.getZTreeObj("treeZyType");
// 獲取選中的節(jié)點(diǎn)
const zyTypeNode = zTree.getCheckedNodes(true);
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解
這篇文章主要為大家介紹了一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了vue 微信授權(quán)解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
在Vue.js3中,組件通信主要包括父子組件通信、兄弟組件通信以及祖孫組件通信,這篇文章主要介紹了Vue3組件通信具體用法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-09-09
這篇文章主要介紹了在vue3中使用jsx語(yǔ)法,下面主要通過(guò)對(duì)比jsx和template不同語(yǔ)法，來(lái)實(shí)現(xiàn)同樣的功能，需要的朋友可以參考下2023-03-03
ElementUI日期選擇器時(shí)間選擇范圍限制的實(shí)現(xiàn)
在日常開(kāi)發(fā)中，我們會(huì)遇到一些情況，限制日期的范圍的選擇，本文就詳細(xì)的介紹了ElementUI日期選擇器時(shí)間選擇范圍限制的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，感興趣的可以了解一下2022-04-04
解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問(wèn)題
這篇文章主要介紹了解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue3中v-model實(shí)現(xiàn)雙向數(shù)據(jù)綁定的全面指南
在Vue開(kāi)發(fā)中,v-model是實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間雙向綁定的關(guān)鍵指令,Vue 3對(duì)v-model進(jìn)行了重大改進(jìn),使其更加靈活和強(qiáng)大,本文將深入探討 Vue 3中v-model的工作原理、新特性以及最佳實(shí)踐,需要的朋友可以參考下2025-07-07
Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
lottie實(shí)現(xiàn)vue自定義loading指令及常用指令封裝詳解
這篇文章主要為大家介紹了lottie實(shí)現(xiàn)vue自定義loading指令及常用指令封裝，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
淺談element關(guān)于table拖拽排序問(wèn)題
本文主要介紹了element關(guān)于table拖拽排序問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10