element-ui?tree?異步樹實現(xiàn)勾選自動展開、指定展開、指定勾選功能
更新時間：2022年08月16日 11:11:23 作者：追極
這篇文章主要介紹了element-ui?tree?異步樹實現(xiàn)勾選自動展開、指定展開、指定勾選,項目中用到了vue的element-ui框架，用到了el-tree組件，由于數(shù)據(jù)量很大，使用了數(shù)據(jù)懶加載模式，即異步樹，需要的朋友可以參考下
背景
項目中用到了vue的element-ui框架，用到了el-tree組件。由于數(shù)據(jù)量很大，使用了數(shù)據(jù)懶加載模式，即異步樹。異步樹采用復(fù)選框進行結(jié)點選擇的時候，沒法自動展開，官方文檔找了半天也沒有找到好的辦法！ 找不到相關(guān)的配置，或者方法可以使用。 經(jīng)過調(diào)試與閱讀elment-ui源碼才發(fā)現(xiàn)有現(xiàn)成的方法可以進行結(jié)點展開。下面就介紹結(jié)點展開的實現(xiàn)！
1.監(jiān)聽復(fù)選框點擊事件check
<el-tree
:props="mulprops"
:load="loadNode"
lazy
node-key="id"
show-checkbox
accordion
@current-change="currentChange"
:filter-node-method="filterNode"
@check="handleCheck"
ref="tree"
:default-checked-keys="defaultCheckedNodes"
:default-expanded-keys="defaultExpandedNodes"
>
</el-tree>2.手動展開，使用node.expand()方法
handleCheck(nodeData, treeChecked) {
let node = this.$refs.tree.getNode(nodeData.id)
//將選中的未展開的節(jié)點進行展開
if(node.checked && !node.expanded){
node.expand(function(){
for(let i=0; i< node.childNodes.length; i++){
node.childNodes[i].expand()
}
})
}
}項目中的實現(xiàn)
一、復(fù)選框勾選后能自動展開并選中，先展開再勾選也可以自動展開
1.監(jiān)聽check-change事件
<el-tree
:props="mulprops"
:load="loadNode"
lazy
node-key="id"
show-checkbox
accordion
@check-change="handleCheckChange"
:filter-node-method="filterNode"
ref="tree"
:default-checked-keys="defaultCheckedNodes"
:default-expanded-keys="defaultExpandedNodes"
>
</el-tree>2.編寫展開勾選結(jié)點方法
handleCheckChange(nodeData, nodeSelected) {
let tree = this.$refs.tree;
let node = tree.getNode(nodeData.id)
//展開選中的未展開的節(jié)點
this.expandCheckedNotExpandNodes(node);
//具體業(yè)務(wù)實現(xiàn)
console.log(nodeData, nodeSelected)
},
//展開選中的未展開的節(jié)點
expandCheckedNotExpandNodes(node) {
let tree = this.$refs.tree;
if (node.checked && !node.expanded && !node.isLeaf) {
node.expand(function () {
let childNodes = node.childNodes;
for (let i = 0; i < childNodes.length; i++) {
let childNode = childNodes[i];
//手動觸發(fā)check-change事件，事件處理函數(shù)中回繼續(xù)調(diào)用此函數(shù)，形成遞歸展開
tree.$emit('check-change', childNode.data, childNode.checked, childNode.indeterminate);
}
})
}
},二、 展開指定結(jié)點
<el-input type="text" v-model='nodeDataIds' placeholder="請輸入結(jié)點數(shù)據(jù)ID(多個以逗號分割)"> ></el-input>
<el-button type="primary" @click="expandNodes(nodeDataIds.split(','))">展開指定結(jié)點</el-button>//展開匹配的結(jié)點，根結(jié)點默認展開
expandNodes(nodeDataIds){
let that = this;
let tree = this.$refs.tree;
let rootNode = tree.root;
this.expandNode(rootNode, nodeDataIds);
},
//展開指定結(jié)點下匹配的結(jié)點
expandNode(node, nodeDataIds){
let that = this;
//當(dāng)前結(jié)點需要展開未展開，則展開(根結(jié)點默認展開)
if(node.level==0 || nodeDataIds.indexOf(node.data.id) != -1){
//展開孩子結(jié)點
let expandChildren = function(){
let childNodes = node.childNodes;
for (let i = 0; i < childNodes.length; i++) {
let childNode = childNodes[i];
//遞歸展開孩子結(jié)點
that.expandNode(childNode, nodeDataIds);
}
}
if(!node.expanded){
//當(dāng)前結(jié)點未展開則先展開，展開后再展開孩子結(jié)點
node.expand(function(){
expandChildren();
});
}else{
//當(dāng)前結(jié)點已展開，直接展開孩子結(jié)點
expandChildren();
}
}
},三. 勾選指定結(jié)點
1.異步樹，需先展開指定結(jié)點，然后有數(shù)據(jù)了才能勾選上（即：展開父結(jié)點，子節(jié)點有了數(shù)據(jù)才能勾選上）
<el-button type="primary" @click="checkNodes(nodeDataIds.split(','))">選中指定結(jié)點</el-button>expandNodes(nodeDataIds)
展開完成的時機比較難判斷
checkNodes(nodeDataIds){
let tree = this.$refs.tree;
tree.setCheckedKeys(nodeDataIds, false)
}2.設(shè)置默認勾選的結(jié)點，再調(diào)用展開方法會自動勾選上，適合寫數(shù)據(jù)回顯
default-checked-keys=['node001','node002']
expandNodes(nodeDataIds)
四、展開并勾選結(jié)點（支持異步樹）牛逼版，實現(xiàn)展開回調(diào)
//展開匹配的結(jié)點，根結(jié)點默認展開
expandNodes(nodeDataIds){
let that = this;
let tree = this.$refs.tree;
let rootNode = tree.root;
this.expandNode(rootNode, nodeDataIds, function(){
that.checkNodes(['node001','node002']);
});
},
//展開指定結(jié)點下匹配的結(jié)點
expandNode(node, nodeDataIds, callback){
let that = this;
//遞歸進入
that.recursiveEnter();
//當(dāng)前結(jié)點需要展開未展開，則展開(根結(jié)點默認展開)
if(node.level==0 || nodeDataIds.indexOf(node.data.id) != -1){
//展開孩子結(jié)點
let expandChildren = function(){
let childNodes = node.childNodes;
if(childNodes.length > 0){
for (let i = 0; i < childNodes.length; i++) {
let childNode = childNodes[i];
//遞歸展開孩子結(jié)點
that.expandNode(childNode, nodeDataIds, callback);
}
}
}
if(!node.expanded){
//當(dāng)前結(jié)點未展開則先展開，展開后再展開孩子結(jié)點
node.expand(function(){
//展開孩子結(jié)點
expandChildren();
//遞歸退出
that.recursiveExit(callback);
});
}else{
//當(dāng)前結(jié)點已展開，直接展開孩子結(jié)點
expandChildren();
//遞歸退出
that.recursiveExit(callback);
}
}else{
//遞歸退出
that.recursiveExit(callback);
}
},
//遞歸計入計數(shù)剩余遞歸次數(shù)
recursiveEnter(){
this.recursiveRemainCount++;
console.log('enter recursiveRemainCount', this.recursiveRemainCount)
},
//遞歸退出計數(shù)剩余遞歸次數(shù)
recursiveExit(callback){
this.recursiveRemainCount--;
console.log('exit recursiveRemainCount', this.recursiveRemainCount)
if(this.recursiveRemainCount==0){
if(callback){
callback();
}
}
},
checkNodes(nodeDataIds){
let tree = this.$refs.tree;
tree.setCheckedKeys(nodeDataIds, false)
}到此這篇關(guān)于element-ui tree 異步樹實現(xiàn)勾選自動展開、指定展開、指定勾選的文章就介紹到這了,更多相關(guān)element-ui tree 異步樹內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
通過 Vue.js 的過渡系統(tǒng)，可以在元素從 DOM 中插入或移除時自動應(yīng)用過渡效果。Vue.js 會在適當(dāng)?shù)臅r機為你觸發(fā) CSS 過渡或動畫，你也可以提供相應(yīng)的 JavaScript 鉤子函數(shù)在過渡過程中執(zhí)行自定義的 DOM 操作2019-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)自定義全局右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了Vue如何獲取url路由地址和參數(shù)的相關(guān)資料,通過簡單的代碼示例,幫助讀者快速掌握Vue路由的基本用法,需要的朋友可以參考下2023-03-03
vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)
這篇文章主要介紹了vue3的介紹和兩種創(chuàng)建方式(cli和vite),vue3對比vue2帶來的性能提升有很多優(yōu)勢，總體來說Vue 3在性能、開發(fā)體驗和代碼組織方面都有所改進，使得它更加適合于大型、復(fù)雜的應(yīng)用程序開發(fā)，需要的朋友可以參考下2023-04-04
vue?Proxy數(shù)據(jù)代理進行校驗部分源碼實例解析
Proxy提供了強大的Javascript元編程,有許多功能,包括運算符重載,對象模擬,簡潔而靈活的API創(chuàng)建,對象變化事件,甚至Vue 3背后的內(nèi)部響應(yīng)系統(tǒng)提供動力,這篇文章主要給大家介紹了關(guān)于vue?Proxy數(shù)據(jù)代理進行校驗部分源碼解析的相關(guān)資料,需要的朋友可以參考下2022-01-01
Day.js庫本身專注于簡化JavaScript日期和時間的操作,它的API設(shè)計直觀,且功能強大,可以方便地格式化日期、添加或減去時間間隔、比較日期等,本文主要介紹了Vue利用dayjs封裝實現(xiàn)時間實時刷新,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細介紹了Vue實現(xiàn)表格批量審核功能實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了vue?element如何添加遮罩層問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
ant-design-vue中設(shè)置Table每頁顯示的條目數(shù)量方式
這篇文章主要介紹了ant-design-vue中設(shè)置Table每頁顯示的條目數(shù)量方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vuex中五大屬性和使用說明(包括輔助函數(shù))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05