el-tree懒加载的实现以及局部刷新方式
作者：微笑的鱼_
这篇文章主要介绍了el-tree懒加载的实现以及局部刷新方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
el-tree懒加载的实现及局部刷新
整个树结构如下
使用懒加载实现，第一个按钮可以折叠收缩，第二个按钮刷新，第三个按钮新增第一级节点
新增第一级节点的弹窗
右侧悬浮显示操作按钮
在第一级右侧点击按钮新增第二级节点的弹窗
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="输入关键字进行过滤" 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>
树节点新增编辑操作弹窗
<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="父节点："> <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方法如果是操作第一级节点就刷新整个树，如果操作的二级或三级节点则局部刷新，
let node_ = this.$refs.elTree.getNode(id)； node_.loaded = false; node_.expand();
通过id获取父节点，通过收缩展开父节点实现父节点的刷新
// 懒加载树
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);
}
})
},
//树根节点加载
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
}
}
})
},
//树节点点击加载列表
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);
},
// 刷新树节点
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();
}
},
//初始化调用一次接口
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});
}
})
}
})
},
//删除树数据
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});
}
})
});
},
//关闭菜单添加编辑按钮
closeMenuDialog:function(){
this.showMenuDialog=false;
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。