el-tree懶加載的實現(xiàn)以及局部刷新方式
el-tree懶加載的實現(xiàn)及局部刷新
整個樹結(jié)構(gòu)如下
使用懶加載實現(xiàn),第一個按鈕可以折疊收縮,第二個按鈕刷新,第三個按鈕新增第一級節(jié)點
新增第一級節(jié)點的彈窗
右側(cè)懸浮顯示操作按鈕
在第一級右側(cè)點擊按鈕新增第二級節(jié)點的彈窗
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)行過濾" 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?'收起':'展開'" :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:'第一級目錄',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>
樹節(jié)點新增編輯操作彈窗
<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é)點:"> <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="請輸入目錄名"></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
方法如果是操作第一級節(jié)點就刷新整個樹,如果操作的二級或三級節(jié)點則局部刷新,
let node_ = this.$refs.elTree.getNode(id); node_.loaded = false; node_.expand();
通過id獲取父節(jié)點,通過收縮展開父節(jié)點實現(xiàn)父節(jié)點的刷新
// 懶加載樹 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); } }) }, //樹根節(jié)點加載 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 } } }) }, //樹節(jié)點點擊加載列表 handleNodeClick:function(data, node, obj) { this.dic_id=data.ID this.initData(1); }, //樹形控件收起與展開功能 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; } }, //樹過濾 filterNode:function(value, data, node) { if (!value) return true; return data.NAME.indexOf(value) !== -1; }, //類型樹形控件查詢功能 filterChange:function (val) { this.$refs.elTree.filter(val); }, // 刷新樹節(jié)點 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); }, //樹的按鈕增刪改事件 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; } }, //點擊按鈕打開彈框添加菜單 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ù)據(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é)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)word,pdf文件的導(dǎo)出功能
這篇文章給大家介紹了vue實現(xiàn)word或pdf文檔導(dǎo)出的功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-07-07vue踩坑記錄之echarts動態(tài)數(shù)據(jù)刷新問題
這篇文章主要介紹了vue踩坑記錄之echarts動態(tài)數(shù)據(jù)刷新問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07vue.js的computed,filter,get,set的用法及區(qū)別詳解
下面小編就為大家分享一篇vue.js的computed,filter,get,set的用法及區(qū)別詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue+element UI中如何給指定日期添加標(biāo)記
這篇文章主要介紹了vue+element UI中如何給指定日期添加標(biāo)記問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件,我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個基本的使用方式,需要的朋友可以參考下2023-03-03