el-tree懶加載的實(shí)現(xiàn)以及局部刷新方式
更新時(shí)間：2023年04月24日 08:55:52 作者：微笑的魚(yú)_
這篇文章主要介紹了el-tree懶加載的實(shí)現(xiàn)以及局部刷新方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
el-tree懶加載的實(shí)現(xiàn)及局部刷新
整個(gè)樹(shù)結(jié)構(gòu)如下
使用懶加載實(shí)現(xiàn)，第一個(gè)按鈕可以折疊收縮，第二個(gè)按鈕刷新，第三個(gè)按鈕新增第一級(jí)節(jié)點(diǎn)
新增第一級(jí)節(jié)點(diǎn)的彈窗
右側(cè)懸浮顯示操作按鈕
在第一級(jí)右側(cè)點(diǎn)擊按鈕新增第二級(jí)節(jié)點(diǎn)的彈窗
html代碼
<el-aside style="width: 15%;border-right: 1px solid rgb(238, 238, 238);">
<div style="display:flex">
<div style="width:86%">
<el-input class="tree-search-input" clearable prefix-icon="el-icon-search" placeholder="輸入關(guān)鍵字進(jìn)行過(guò)濾" size="mini" v-model="filterText" @input="filterChange($event)"></el-input>
</div>
<div style="display:flex;align-items:center;">
<i style="margin-right:5px;font-size: 18px;font-weight: bold;" :title="expandNode?'收起':'展開(kāi)'" :class="{'el-icon-full-screen':!expandNode,'el-icon-crop':expandNode}" @click="nodeExpand"></i>
<i title="刷新" class="el-icon-refresh" style="margin-right:5px;font-size: 18px;font-weight: bold;" @click="getQmsProductTree"></i>
<i title="新增" class="el-icon-plus" style="font-size: 18px;font-weight: bold;" @click="showDialog({NAME:'第一級(jí)目錄',ID:0},'add')"></i>
</div>
</div>
<el-tree class="my-el-tree" :data="treeData" highlight-current :expand-on-click-node="true" ref="elTree" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="expandNode" :filter-node-method="filterNode" lazy :load="loadNode" node-key="ID">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span class="show-ellipsis" style="width: 90%" :title="node.NAME">{{ data.NAME }}</span>
<el-dropdown size="mini" @command="menuHandleCommand">
<span class="el-dropdown-link">
<i title="更多操作" class="el-icon-more"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus" :command="{ node: node, data, action: 'add' }">添加</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit" :command="{ node: node, data, action: 'edit' }">編輯</el-dropdown-item>
<el-dropdown-item divided icon="el-icon-delete" :command="{ node: node, data, action: 'delete' }">刪除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</el-tree>
</el-aside>
樹(shù)節(jié)點(diǎn)新增編輯操作彈窗
<el-dialog class="custom-class" :title="modularTitle" :visible.sync="showMenuDialog" v-if="showMenuDialog" width="40%"> <el-form label-width="130px" size="mini" ref="menuRuleForm" :model="menuRuleForm" :rules="menuRules"> <el-form-item v-if="menuState===0" label="父節(jié)點(diǎn)："> <el-input style="width: 90%" v-model="menuRuleForm.PARENT_NAME" disabled></el-input> </el-form-item> <el-form-item label="目錄名稱：" prop="NAME"> <el-input style="width: 90%" v-model="menuRuleForm.NAME" placeholder="請(qǐng)輸入目錄名"></el-input> </el-form-item> </el-form> <div align="center"> <el-button size="mini" type="primary" @click="saveMenu">保 存</el-button> <el-button size="mini" @click="closeMenuDialog">取 消</el-button> </div> </el-dialog>
js代碼，
refreshTreeNode方法如果是操作第一級(jí)節(jié)點(diǎn)就刷新整個(gè)樹(shù)，如果操作的二級(jí)或三級(jí)節(jié)點(diǎn)則局部刷新，
let node_ = this.$refs.elTree.getNode(id)； node_.loaded = false; node_.expand();
通過(guò)id獲取父節(jié)點(diǎn)，通過(guò)收縮展開(kāi)父節(jié)點(diǎn)實(shí)現(xiàn)父節(jié)點(diǎn)的刷新
// 懶加載樹(shù)
loadNode:function(node, resolve) {
if (node.level === 0) {
return resolve([]);
}
axios({
url:`/magic/api/qms/tree/getChildrenData`,
method:'post',
data: {
TYPE: 'PRC',
ID: node.data.ID
}
}).then(res=>{
if(res && res.data && res.data.data) {
resolve(res.data.data);
}
})
},
//樹(shù)根節(jié)點(diǎn)加載
getQmsProductTree:function(){
axios({
url:`/tree/getChildrenData`,
method:'post',
data: {
TYPE: 'PRC'
}
}).then(res=>{
if(res && res.data && res.data.data) {
if(res.data.data.length>0){
this.treeData=res.data.data
this.dic_id = res.data.data[0].ID
}
}
})
},
//樹(shù)節(jié)點(diǎn)點(diǎn)擊加載列表
handleNodeClick:function(data, node, obj) {
this.dic_id=data.ID
this.initData(1);
},
//樹(shù)形控件收起與展開(kāi)功能
nodeExpand:function(){
this.expandNode = !this.expandNode
let elTree = this.$refs.elTree;
for (var i = 0; i < elTree.store._getAllNodes().length; i++) {
elTree.store._getAllNodes()[i].expanded = this.expandNode;
}
},
//樹(shù)過(guò)濾
filterNode:function(value, data, node) {
if (!value) return true;
return data.NAME.indexOf(value) !== -1;
},
//類型樹(shù)形控件查詢功能
filterChange:function (val) {
this.$refs.elTree.filter(val);
},
// 刷新樹(shù)節(jié)點(diǎn)
refreshTreeNode:function(PARENT_ID) {
let id = PARENT_ID?PARENT_ID:this.menuRuleForm.PARENT_ID
if(id && id !== '0'){
let node_ = this.$refs.elTree.getNode(id)
node_.loaded = false;
node_.expand();
}else{
this.getQmsProductTree();
}
},
//初始化調(diào)用一次接口
init: function() {
this.getQmsProductTree();
this.initData(1);
},
//樹(shù)的按鈕增刪改事件
menuHandleCommand:function(command){
let data = command.data;
let action = command.action;
switch (action) {
case 'add':
this.showDialog(data, action);
break;
case 'edit':
this.showDialog(data, action);
break;
case 'delete':
this.delSysType(data);
break;
}
},
//點(diǎn)擊按鈕打開(kāi)彈框添加菜單
showDialog:function(data, action) {
this.showMenuDialog = true;
if (data) {
if (action == 'add') {
this.modularTitle = '新增';
this.menuRuleForm = {
NAME:'',
PARENT_ID: data.ID,
PARENT_NAME: data.NAME
};
this.menuState = 0;
} else if (action == 'edit') {
this.modularTitle = '編輯';
this.menuRuleForm = {
NAME: data.NAME,
ID: data.ID,
PARENT_ID:data.PARENT_ID
};
this.menuState = 1;
}
}
},
//保存菜單
saveMenu:function(){
this.$refs.menuRuleForm.validate((valid)=>{
if(valid) {
let param = {
NAME: this.menuRuleForm.NAME
}
if(this.menuState === 0) {
param.PARENT_ID = this.menuRuleForm.PARENT_ID
param.TYPE = 'PRC'
}
if(this.menuState === 1) {
param.ID = this.menuRuleForm.ID
}
axios({
url:'/tree/save',
method:'post',
data: param
}).then(res=>{
if(res.data.state){
this.$message({type: 'success',message: res.data.message});
this.showMenuDialog = false;
this.refreshTreeNode()
}else{
this.$message({type: 'error',message: res.data.message});
}
})
}
})
},
//刪除樹(shù)數(shù)據(jù)
delSysType:function(data) {
this.$confirm('是否確定刪除?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
axios({
url:'/tree/delete',
method:'post',
data: data
}).then(res=>{
if(res.data.state){
this.$message({type: 'success',message: res.data.message});
this.showMenuDialog = false;
this.refreshTreeNode(data.PARENT_ID)
}else{
this.$message({type: 'error',message: res.data.message});
}
})
});
},
//關(guān)閉菜單添加編輯按鈕
closeMenuDialog:function(){
this.showMenuDialog=false;
},
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)word，pdf文件的導(dǎo)出功能
這篇文章給大家介紹了vue實(shí)現(xiàn)word或pdf文檔導(dǎo)出的功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07
vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問(wèn)題
這篇文章主要介紹了vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue學(xué)習(xí)筆記之slot插槽用法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之slot插槽用法,結(jié)合實(shí)例形式對(duì)比分析了vue使用slot插槽的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-02-02
今天小編就為大家分享一篇基于form-data請(qǐng)求格式詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要介紹了vue上傳文件formData上傳的解決全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue.js的computed,filter,get,set的用法及區(qū)別詳解
下面小編就為大家分享一篇vue.js的computed,filter,get,set的用法及區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue多頁(yè)面項(xiàng)目開(kāi)發(fā)實(shí)戰(zhàn)指南
一般我們的vue項(xiàng)目都是單頁(yè)面的,其實(shí)因?yàn)関ue在工程化開(kāi)發(fā)的時(shí)候依賴了webpack,webpack幫我們將所有的資源整合到一起而形成一個(gè)單頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于vue多頁(yè)面項(xiàng)目開(kāi)發(fā)的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了詳解vue-loader在項(xiàng)目中是如何配置的，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue+element UI中如何給指定日期添加標(biāo)記
這篇文章主要介紹了vue+element UI中如何給指定日期添加標(biāo)記問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來(lái)的事件，我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個(gè)基本的使用方式，需要的朋友可以參考下2023-03-03