element el-tree组件的动态加载、新增、更新节点的实现
(编辑：jimmy 日期: 2024/12/25 浏览：3 次 )
最近在根据需求，需要用到树形控件，ele 的封装了树形控件正好拿来用，用的途中遇到一些问题就总结下，哈哈哈
说正事，我需要动态的加载出整个树形结构，刚好就有
符合需求，啦啦啦
用的时候出现问题了，我要如何把后台返回个我的数据加载到表里呢，上菜。。。
<template>
<el-tree
empty-text="暂无数据"
:expand-on-click-node="false"
:props="defaultProps"
:load="loadNode"
node-key="id"
lazy>
<div class="custom-tree-node" slot-scope="{ node, data }">
<div class="fl"><i class="el-icon-menu"></i>{{ node.label }}</div>
<div class="fr">
<el-button
type="primary"
size="mini"
@click="() => addDialogShow(node, data, 0)">
新增
</el-button>
<el-button
type="primary"
plain
size="mini"
@click="() => addDialogShow(node, data, 1)">
更新
</el-button>
<!-- <el-button
disabled
type="danger"
size="mini"
@click="() => remove(node, data)">
删除
</el-button> -->
</div>
</div>
</el-tree>
</template>
el-tree 标准样式了
部分
<script>
import { typeList, addtype, updatetype, deltype } from '@/api/baseType'
export default {
data() {
return {
defaultProps: {
id: "Id",
label: 'Name',
children: 'children'
},
//新增相关
addDialog:false,
addForm: {},
addRules:{
name:[{required: true,message: '请输入基础类型名',trigger: 'blur'}]
},
pid: null, // 基础类型得父级id
flag: null, //操作标志位
node: {}, // tree 节点对象
nodedata: {}
}
},
created(){
},
methods: {
// 加载树结点
loadNode(node, resolve) {
// 如果是顶级的父节点
if (node.level === 0) {
// 查找顶级对象
typeList(node.level).then(res => {
if (res.Data) {
return resolve(res.Data)
} else {
this.$message.error(res.Msg)
}
}).catch(() => {
let data = []
return resolve(data)
})
} else {
// 根据父节点id找寻下一级的所有节点
typeList(node.data.Id).then(res => {
if (res.Data) {
return resolve(res.Data)
} else {
this.$message.error(res.Msg)
}
}).catch(() => {
let data = []
return resolve(data)
})
}
},
remove(node, data) {
console.log(node, data)
// const parent = node.parent;
// const children = parent.data.children || parent.data;
// const index = children.findIndex(d => d.id === data.id);
// children.splice(index, 1);
},
//新增
addDialogShow(node,data,flag) {
this.node = node //
this.nodedata = data
if(flag === 0) {
this.addDialog = true
this.pid = data.Id
this.flag = 0
}
if(flag === 1) {
this.addDialog = true
this.pid = data.Id
this.addForm.name = data.Name
this.flag = 1
}
},
addSubmit(flag) {
this.$refs.addForm.validate((valid) => {
if(valid){
this.listLoading = true
let arr = Object.assign({}, this.addForm)
console.log(flag)
if(flag === 0) {
let data = {
pid: this.pid,
name: arr.name
}
// 新增 api
addtype(data).then(() => {
typeList(data.pid).then(res => {
let id = res.Data[0].Id
const newChild = { id: id, label: arr.name, children: [] };
if (!this.nodedata.children) {
this.$set(nodedata, 'children', []);
}
this.nodedata.children.push(newChild)
this.addDialog = false
this.$notify.success({
message:'新增成功',
duration: 2000
})
})
}).catch(() => {
this.addDialog = false
})
}
if(flag === 1) {
let data = {
name: arr.name
}
updatetype(this.pid,data).then(res => {
this.$set(this.node.data, 'Name',arr.name)
this.addDialog = false
this.$notify.success({
message:'更新成功',
duration: 2000
})
}).catch(() => {
this.addDialog = false
})
}
}
})
}
}
}
</script>
动态的加载树形数据 这里通过对ele 提供的方法
这里对 el-tree 的样式做了些许的改变
这个看个人需要了
<style lang="less" scoped>
.el-tree-node__content {
line-height: 50px;
.custom-tree-node {
width: 100%;
display: block;
.fl {
float: left;
line-height: 31px;
}
.fr {
float: right;
margin-right: 50px;
}
}
}
</style>
动态加载节点数据，这里通过 ele 提供的 loadNode（） 方法 可以根据个人需要改写
这里我是用弹出框进行信息的管理
实现动态的后台数据更新 和 前台显示的刷新，
addDialogShow(node,data,flag) {
this.node = node // 这里对nodetree 进行了预先存储
this.nodedata = data
}
然后 在更行后台api 成功后 通过 Vue.$set() 刷新子节点数据
let arr = Object.assign({}, this.addForm) //获取输入框输入的数据
updatetype(this.pid,data).then(res => {
this.$set(this.node.data, 'Name',arr.name) //同步刷新
this.addDialog = false
this.$notify.success({
message:'更新成功',
duration: 2000
})
}).catch(() => {
this.addDialog = false
})
}
下一篇：element-ui table行点击获取行索引（index）并利用索引更换行顺序