Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹狀結(jié)構(gòu)
更新時間：2024年04月26日 08:43:28 作者：球球和皮皮
這篇文章主要介紹了Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹狀結(jié)構(gòu)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、簡介
效果展示：
應(yīng)用場景是這樣的：后臺給我返回的數(shù)據(jù)是處理好層級的數(shù)據(jù)，包含關(guān)系是通過數(shù)據(jù)里的children屬性。
舉個例子：
{
label: '汽車',
value: 'car',
children: [
{
label: '大眾',
value: 'das'
},
{
label: '豐田',
value: 'Toyota'
}
]
}
大體就是這種類型的數(shù)據(jù)，但是，問題是數(shù)據(jù)量特別大，有上萬條；而且層級數(shù)不固定，層數(shù)可能很多。
最開始拿到這個問題的時候，我用的是element組件庫的el-tree，因?yàn)閑l-tree很容易上手，而且也支持這種多層數(shù)據(jù)的展示，還可以添加checkbox等等，完全可以滿足功能要求。
但是用el-tree實(shí)現(xiàn)之后，發(fā)現(xiàn)渲染時間有時長達(dá)十秒，而且經(jīng)常瀏覽器卡死，最后不得不放棄el-tree組件，替換其他性能更好的樹形結(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是從后臺獲取的數(shù)據(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，所以需要同時引入Jquery。
- 為了避免版本變更帶來的bug，我把z-tree組件放到了component中。chkboxType: { “Y”: “”, “N”: “s” }屬性用來設(shè)置checkbox的關(guān)聯(lián)關(guān)系。
- 具體查看官網(wǎng)z-tree的樣式也要引入進(jìn)來
2、下載：
https://www.treejs.cn/v3/main.php#_zTreeInfo
3、擴(kuò)展（使用自定義圖標(biāo)）：
由于我展示鎖定和非鎖定的狀態(tài)，所以我用了自定義的圖標(biāo)。
改寫的位置在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、折疊和展開
// 獲取到z-tree對象
const zTree = $.fn.zTree.getZTreeObj("treeZyType");
// state為折疊展開狀態(tài)，true為展開，false為折疊。
zTree.expandAll(state);
2、checkbox狀態(tài)下的全選
// 獲取到z-tree對象
const zTree = $.fn.zTree.getZTreeObj("treeZyType");
// state為選中狀態(tài)，true為全選，false為取消全選。
zTree.checkAllNodes(state);
3、獲取選中的節(jié)點(diǎn)
// 獲取到z-tree對象
const zTree = $.fn.zTree.getZTreeObj("treeZyType");
// 獲取選中的節(jié)點(diǎn)
const zyTypeNode = zTree.getCheckedNodes(true);
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解
這篇文章主要為大家介紹了一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了vue 微信授權(quán)解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
在Vue.js3中,組件通信主要包括父子組件通信、兄弟組件通信以及祖孫組件通信,這篇文章主要介紹了Vue3組件通信具體用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-09-09
這篇文章主要介紹了在vue3中使用jsx語法,下面主要通過對比jsx和template不同語法，來實(shí)現(xiàn)同樣的功能，需要的朋友可以參考下2023-03-03
ElementUI日期選擇器時間選擇范圍限制的實(shí)現(xiàn)
在日常開發(fā)中，我們會遇到一些情況，限制日期的范圍的選擇，本文就詳細(xì)的介紹了ElementUI日期選擇器時間選擇范圍限制的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，感興趣的可以了解一下2022-04-04
解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問題
這篇文章主要介紹了解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue3中v-model實(shí)現(xiàn)雙向數(shù)據(jù)綁定的全面指南
在Vue開發(fā)中,v-model是實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間雙向綁定的關(guān)鍵指令,Vue 3對v-model進(jìn)行了重大改進(jìn),使其更加靈活和強(qiáng)大,本文將深入探討 Vue 3中v-model的工作原理、新特性以及最佳實(shí)踐,需要的朋友可以參考下2025-07-07
Vue實(shí)現(xiàn)購物小球拋物線的方法實(shí)例
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)購物小球拋物線的方法實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(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拖拽排序問題，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10