Vue ElementUI Tree懒加载增删改查
2020-03-29 本文已影响0人
洃冭鎯oo
关于Element UI Tree懒加载的问题，官方文档描述的也不是很清楚，添加一级节点找了好多资料最终解决，分享给大家，顺便给自己记录下，留着翻看。
JS 代码
<!DOCTYPE html>
<template>
<div v-loading="supplierClassTreeLoading" style="height: 100%" >
<el-tree
ref="orgTree"
style="height: 100%;"
class="tree"
:indent="0"
lazy
:highlight-current="highLight"
:load="querySupplierClassTree"
node-key="guid"
:props="defaultProps"
:default-expanded-keys="defaultExpandedKeys"
@node-click="handleSupplierClassClick"
/>
</div>
</template>
<script>
export default {
data() {
return {
defaultProps: {
children: 'children',
label: 'supplierClassName',
isLeaf: function(data, node) {
// 用于判断是否叶子节点
if (data && data.leaf) {
return true
}
return false
}
},
// 默认展示的节点
defaultExpandedKeys: [],
supplierClassTreeLoading: false,
addLoading: false,
// 用于记录树的初始值
initResolve: null,
initNode: null,
supplierClasses: {},
supplierClassNode: null,
checkList: []，
isInit: false,
}
},
methods: {
// 初始化树
querySupplierClassTree(node, resolve) {
const queryData = {}
if (node && node.data) {
queryData.guid = node.data.guid
} else {
// 初始化保存，方便以后添加一级节点
this.initNode = node
this.initResolve = resolve
this.supplierClassTreeLoading = true
}
supplierClassTree(queryData).then(res => {
resolve(res.data)
this.supplierClassTreeLoading = false
}).catch(err => {
this.supplierClassTreeLoading = false
})
},
// 初始化树时，所需要加载的一些事件，例如
// 1、初始化树时，默认展开第一个父节点
// 2、初始化树时，默认第一个父节点高亮
// 3、 ......
initCurrentKey(data) {
// 只有初始化时，才进入此方法
if (!this.isInit) {
this.isInit = true
if (data && data.length > 0) {
// 默认第一个父节点高亮
this.$refs.orgTree.setCurrentKey(data[0].guid)
// 默认展开第一个节点
this.defaultExpandedKeys.push(data[0].guid)
this.handleSupplierClassClick(data[0])
}
}
},
// 树点击事件
handleSupplierClassClick(node) {
this.supplierClassNode = node
// 添加子节点时，保存子节点的父级节点id
this.supplierClasses.supplierClassParent = node.guid
},
// 新增树
addSupplierClass() {
this.addLoading = true
saveSupplierClass(this.supplierClasses).then(res => {
this.addLoading = false
successMsg('新增成功')
if (res.data.supplierClassParent == null) {
// 此处清空 resolve 原有的缓存
this.initNode.childNodes = []
// 再次调用树加载方法
this.querySupplierClassTree(this.initNode,this.initResolve)
this.geChilrend()
return
}
// 子节点追加，再次加载当前节点下的数据
let node = this.$refs.orgTree.getNode(this.supplierClassNode.guid);
node.loaded = false
node.expand()
}).catch(err => {
this.addLoading = false
})
},
// 编辑(子节点或父节点)
updateSupplierClass() {
this.addLoading = true
updateSupplierClass(this.supplierClasses).then(res => {
successMsg(‘编辑成功’)
this.addLoading = false
// 获取当前编辑的节点
const node = this.$refs.orgTree.getNode(this.supplierClasses.guid)
// 修改节点信息
node.data.supplierClassName = this.supplierClasses.supplierClassName
node.data.supplierClassId = this.supplierClasses.supplierClassId
}).catch(err => {
this.addLoading = false
})
},
/**
* 删除节点
*/
handleRemoveNode() {
// 表格每行都没有一个复选框，checkList 集合就是复选框选择的数据
// 循环批量删除节点
this.checkList.forEach(item => {
// 获取节点信息
const node = this.$refs.orgTree.getNode(item)
if (node) {
// 如果不为空，删除
this.$refs.orgTree.remove(node)
}
})
},
},
}
</script>
这样Element UI 这个懒加载树就算完成了，小弟技术有限，欢迎有大神指错纠正，感激不尽！
