Vue使用z-tree處理大數量的數據以及生成樹狀結構
更新時間：2024年04月26日 08:43:28 作者：球球和皮皮
這篇文章主要介紹了Vue使用z-tree處理大數量的數據以及生成樹狀結構方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、簡介
效果展示：
應用場景是這樣的：后臺給我返回的數據是處理好層級的數據，包含關系是通過數據里的children屬性。
舉個例子：
{
label: '汽車',
value: 'car',
children: [
{
label: '大眾',
value: 'das'
},
{
label: '豐田',
value: 'Toyota'
}
]
}
大體就是這種類型的數據，但是，問題是數據量特別大，有上萬條；而且層級數不固定，層數可能很多。
最開始拿到這個問題的時候，我用的是element組件庫的el-tree，因為el-tree很容易上手，而且也支持這種多層數據的展示，還可以添加checkbox等等，完全可以滿足功能要求。
但是用el-tree實現之后，發(fā)現渲染時間有時長達十秒，而且經常瀏覽器卡死，最后不得不放棄el-tree組件，替換其他性能更好的樹形結構組件。
二、引入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是從后臺獲取的數據，層級結構已經處理好。
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” }屬性用來設置checkbox的關聯關系。
- 具體查看官網z-tree的樣式也要引入進來
2、下載：
https://www.treejs.cn/v3/main.php#_zTreeInfo
3、擴展（使用自定義圖標）：
由于我展示鎖定和非鎖定的狀態(tài)，所以我用了自定義的圖標。
改寫的位置在jquery.ztree.core.js文件下，makeNodeIcoStyle函數。
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 {
// 判斷數據屬性，根據屬性使用特定圖標
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);
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
.sync?修飾符所提供的功能,當一個子組件改變了一個prop的值時,這個變化也會同步到父組件中所綁定,下面這篇文章主要給大家介紹了關于Vue中子組件向父組件傳值以及.sync修飾符的相關資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了解決vue項目打包后提示圖片文件路徑錯誤的問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue如何動態(tài)改變列表搜索出關鍵詞的字體顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇Vue實現點擊按鈕復制文本內容的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vite+vue3+element-plus搭建項目的踩坑記錄
這篇文章主要介紹了vite+vue3+element-plus搭建項目的踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了詳解vue嵌套路由-query傳遞參數，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
如何解決element-ui中select下拉框popper超出彈框問題
這篇文章主要介紹了如何解決element-ui中select下拉框popper超出彈框問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
如果我們在每個組件中去重復定義這些屬性和方法會使得項目出現代碼冗余并提高了維護難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2023-02-02
本篇文章主要介紹了vue 將頁面公用的頭部組件化的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
網站中我們經?？吹接袀€導航路徑,可以直觀地顯示當前頁面的路徑,并快速返回之前的任意頁面,這是一個非常實用的功能,也是在Web前端必備的導航UI之一,這篇文章主要給大家介紹了關于vue3自己封裝面包屑功能組件的幾種方式,需要的朋友可以參考下2021-09-09