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，因為el-tree很容易上手，而且也支持這種多層數(shù)據(jù)的展示，還可以添加checkbox等等，完全可以滿足功能要求。
但是用el-tree實現(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é)點
// 獲取到z-tree對象
const zTree = $.fn.zTree.getZTreeObj("treeZyType");
// 獲取選中的節(jié)點
const zyTypeNode = zTree.getCheckedNodes(true);
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
.sync?修飾符所提供的功能,當(dāng)一個子組件改變了一個prop的值時,這個變化也會同步到父組件中所綁定,下面這篇文章主要給大家介紹了關(guān)于Vue中子組件向父組件傳值以及.sync修飾符的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了解決vue項目打包后提示圖片文件路徑錯誤的問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
Vue如何動態(tài)改變列表搜索出關(guān)鍵詞的字體顏色
這篇文章主要介紹了Vue如何動態(tài)改變列表搜索出關(guān)鍵詞的字體顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue實現(xiàn)點擊按鈕復(fù)制文本內(nèi)容的例子
今天小編就為大家分享一篇Vue實現(xiàn)點擊按鈕復(fù)制文本內(nèi)容的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vite+vue3+element-plus搭建項目的踩坑記錄
這篇文章主要介紹了vite+vue3+element-plus搭建項目的踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了詳解vue嵌套路由-query傳遞參數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
如何解決element-ui中select下拉框popper超出彈框問題
這篇文章主要介紹了如何解決element-ui中select下拉框popper超出彈框問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2023-02-02
本篇文章主要介紹了vue 將頁面公用的頭部組件化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
網(wǎng)站中我們經(jīng)?？吹接袀€導(dǎo)航路徑,可以直觀地顯示當(dāng)前頁面的路徑,并快速返回之前的任意頁面,這是一個非常實用的功能,也是在Web前端必備的導(dǎo)航UI之一,這篇文章主要給大家介紹了關(guān)于vue3自己封裝面包屑功能組件的幾種方式,需要的朋友可以參考下2021-09-09