element-ui?tree?異步樹實(shí)現(xiàn)勾選自動(dòng)展開、指定展開、指定勾選功能
更新時(shí)間：2022年08月16日 11:11:23 作者：追極
這篇文章主要介紹了element-ui?tree?異步樹實(shí)現(xiàn)勾選自動(dòng)展開、指定展開、指定勾選,項(xiàng)目中用到了vue的element-ui框架，用到了el-tree組件，由于數(shù)據(jù)量很大，使用了數(shù)據(jù)懶加載模式，即異步樹，需要的朋友可以參考下
背景
項(xiàng)目中用到了vue的element-ui框架，用到了el-tree組件。由于數(shù)據(jù)量很大，使用了數(shù)據(jù)懶加載模式，即異步樹。異步樹采用復(fù)選框進(jìn)行結(jié)點(diǎn)選擇的時(shí)候，沒法自動(dòng)展開，官方文檔找了半天也沒有找到好的辦法！ 找不到相關(guān)的配置，或者方法可以使用。 經(jīng)過調(diào)試與閱讀elment-ui源碼才發(fā)現(xiàn)有現(xiàn)成的方法可以進(jìn)行結(jié)點(diǎn)展開。下面就介紹結(jié)點(diǎn)展開的實(shí)現(xiàn)！
1.監(jiān)聽復(fù)選框點(diǎn)擊事件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.手動(dòng)展開，使用node.expand()方法
handleCheck(nodeData, treeChecked) {
let node = this.$refs.tree.getNode(nodeData.id)
//將選中的未展開的節(jié)點(diǎn)進(jìn)行展開
if(node.checked && !node.expanded){
node.expand(function(){
for(let i=0; i< node.childNodes.length; i++){
node.childNodes[i].expand()
}
})
}
}項(xiàng)目中的實(shí)現(xiàn)
一、復(fù)選框勾選后能自動(dòng)展開并選中，先展開再勾選也可以自動(dòng)展開
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é)點(diǎn)方法
handleCheckChange(nodeData, nodeSelected) {
let tree = this.$refs.tree;
let node = tree.getNode(nodeData.id)
//展開選中的未展開的節(jié)點(diǎn)
this.expandCheckedNotExpandNodes(node);
//具體業(yè)務(wù)實(shí)現(xiàn)
console.log(nodeData, nodeSelected)
},
//展開選中的未展開的節(jié)點(diǎn)
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];
//手動(dòng)觸發(fā)check-change事件，事件處理函數(shù)中回繼續(xù)調(diào)用此函數(shù)，形成遞歸展開
tree.$emit('check-change', childNode.data, childNode.checked, childNode.indeterminate);
}
})
}
},二、 展開指定結(jié)點(diǎn)
<el-input type="text" v-model='nodeDataIds' placeholder="請輸入結(jié)點(diǎn)數(shù)據(jù)ID(多個(gè)以逗號分割)"> ></el-input>
<el-button type="primary" @click="expandNodes(nodeDataIds.split(','))">展開指定結(jié)點(diǎn)</el-button>//展開匹配的結(jié)點(diǎn)，根結(jié)點(diǎn)默認(rèn)展開
expandNodes(nodeDataIds){
let that = this;
let tree = this.$refs.tree;
let rootNode = tree.root;
this.expandNode(rootNode, nodeDataIds);
},
//展開指定結(jié)點(diǎn)下匹配的結(jié)點(diǎn)
expandNode(node, nodeDataIds){
let that = this;
//當(dāng)前結(jié)點(diǎn)需要展開未展開，則展開(根結(jié)點(diǎn)默認(rèn)展開)
if(node.level==0 || nodeDataIds.indexOf(node.data.id) != -1){
//展開孩子結(jié)點(diǎn)
let expandChildren = function(){
let childNodes = node.childNodes;
for (let i = 0; i < childNodes.length; i++) {
let childNode = childNodes[i];
//遞歸展開孩子結(jié)點(diǎn)
that.expandNode(childNode, nodeDataIds);
}
}
if(!node.expanded){
//當(dāng)前結(jié)點(diǎn)未展開則先展開，展開后再展開孩子結(jié)點(diǎn)
node.expand(function(){
expandChildren();
});
}else{
//當(dāng)前結(jié)點(diǎn)已展開，直接展開孩子結(jié)點(diǎn)
expandChildren();
}
}
},三. 勾選指定結(jié)點(diǎn)
1.異步樹，需先展開指定結(jié)點(diǎn)，然后有數(shù)據(jù)了才能勾選上（即：展開父結(jié)點(diǎn)，子節(jié)點(diǎn)有了數(shù)據(jù)才能勾選上）
<el-button type="primary" @click="checkNodes(nodeDataIds.split(','))">選中指定結(jié)點(diǎn)</el-button>expandNodes(nodeDataIds)
展開完成的時(shí)機(jī)比較難判斷
checkNodes(nodeDataIds){
let tree = this.$refs.tree;
tree.setCheckedKeys(nodeDataIds, false)
}2.設(shè)置默認(rèn)勾選的結(jié)點(diǎn)，再調(diào)用展開方法會(huì)自動(dòng)勾選上，適合寫數(shù)據(jù)回顯
default-checked-keys=['node001','node002']
expandNodes(nodeDataIds)
四、展開并勾選結(jié)點(diǎn)（支持異步樹）牛逼版，實(shí)現(xiàn)展開回調(diào)
//展開匹配的結(jié)點(diǎn)，根結(jié)點(diǎn)默認(rèn)展開
expandNodes(nodeDataIds){
let that = this;
let tree = this.$refs.tree;
let rootNode = tree.root;
this.expandNode(rootNode, nodeDataIds, function(){
that.checkNodes(['node001','node002']);
});
},
//展開指定結(jié)點(diǎn)下匹配的結(jié)點(diǎn)
expandNode(node, nodeDataIds, callback){
let that = this;
//遞歸進(jìn)入
that.recursiveEnter();
//當(dāng)前結(jié)點(diǎn)需要展開未展開，則展開(根結(jié)點(diǎn)默認(rèn)展開)
if(node.level==0 || nodeDataIds.indexOf(node.data.id) != -1){
//展開孩子結(jié)點(diǎn)
let expandChildren = function(){
let childNodes = node.childNodes;
if(childNodes.length > 0){
for (let i = 0; i < childNodes.length; i++) {
let childNode = childNodes[i];
//遞歸展開孩子結(jié)點(diǎn)
that.expandNode(childNode, nodeDataIds, callback);
}
}
}
if(!node.expanded){
//當(dāng)前結(jié)點(diǎn)未展開則先展開，展開后再展開孩子結(jié)點(diǎn)
node.expand(function(){
//展開孩子結(jié)點(diǎn)
expandChildren();
//遞歸退出
that.recursiveExit(callback);
});
}else{
//當(dāng)前結(jié)點(diǎn)已展開，直接展開孩子結(jié)點(diǎn)
expandChildren();
//遞歸退出
that.recursiveExit(callback);
}
}else{
//遞歸退出
that.recursiveExit(callback);
}
},
//遞歸計(jì)入計(jì)數(shù)剩余遞歸次數(shù)
recursiveEnter(){
this.recursiveRemainCount++;
console.log('enter recursiveRemainCount', this.recursiveRemainCount)
},
//遞歸退出計(jì)數(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 異步樹實(shí)現(xiàn)勾選自動(dòng)展開、指定展開、指定勾選的文章就介紹到這了,更多相關(guān)element-ui tree 異步樹內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue el-table實(shí)現(xiàn)行內(nèi)編輯功能
這篇文章主要為大家詳細(xì)介紹了vue el-table實(shí)現(xiàn)行內(nèi)編輯功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
vue學(xué)習(xí)筆記之slot插槽用法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之slot插槽用法,結(jié)合實(shí)例形式對比分析了vue使用slot插槽的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-02-02
本文詳細(xì)講解了vue3獲取當(dāng)前路由地址的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
這篇文章主要介紹了Vue關(guān)于自定義事件的$event傳參問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本文是作者通過實(shí)際項(xiàng)目的優(yōu)化實(shí)踐進(jìn)行總結(jié)而來，希望讀者讀完本文，有一定的啟發(fā)思考，從而對自己的項(xiàng)目進(jìn)行優(yōu)化起到幫助2022-08-08
這篇文章主要介紹了Vue中插入HTML代碼的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
本文就討論下怎么實(shí)現(xiàn)一個(gè)處理.vue文件的loader，以及用loader處理完.vue文件怎么把內(nèi)容渲染在瀏覽器上并實(shí)現(xiàn)簡單的響應(yīng)式，對vue文件解析器相關(guān)知識(shí)感興趣的朋友一起看看吧2022-06-06
Vue實(shí)現(xiàn)單點(diǎn)登錄控件的完整代碼
這里提供一個(gè)Vue單點(diǎn)登錄的demo給大家參考，對Vue實(shí)現(xiàn)單點(diǎn)登錄控件的完整代碼感興趣的朋友跟隨小編一起看看吧2021-11-11
Vue電商網(wǎng)站首頁內(nèi)容吸頂功能實(shí)現(xiàn)過程
電商網(wǎng)站的首頁內(nèi)容會(huì)比較多，頁面比較長，為了能讓用戶在滾動(dòng)瀏覽內(nèi)容的過程中都能夠快速的切換到其它分類。需要分類導(dǎo)航一直可見，所以需要一個(gè)吸頂導(dǎo)航的效果。目標(biāo):完成頭部組件吸頂效果的實(shí)現(xiàn)2023-04-04
element-ui table span-method(行合并)的實(shí)現(xiàn)代碼
element-ui官網(wǎng)中關(guān)于行合并的例子是根據(jù)行號進(jìn)行合并的，這顯然不符合我們?nèi)粘ｉ_發(fā)需求，因?yàn)橥ǔＮ覀僼able中的數(shù)據(jù)都是動(dòng)態(tài)生成的，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12