懒加载tree结构的实现
<el-tree
ref="tree"
node-key="esid"
lazy
:props="props"
:data="treeData"
:load="loadNode"
v-loading="list.loading"
@node-click="handleNodeClick"
/>
data(){
return{
// props中设置isLeaf根据哪个属性是否显示节点箭头
props: {
isLeaf: 'isLeaf'
},
// EBOM树结构
treeData: [],
}
}
methods:{
// 树点击
handleNodeClick(data, node){
// 记录节点,当如果需要刷新节点信息时可通过记录的节点进行刷新对应的节点信息
this.currentNode = node
let ehid = node.data.esrelationid == 0 ? node.data.ehid : node.data.esrelationid
// 查询列表数据
this.getEbomMaterialData(ehid)
// 查询选中节点的头信息
this.initEbomHeaderByMbno(ehid)
},
// 局部刷新方法
partialRefresh() {
const node = this. currentNode
console.log('局部刷新:',node)
// 新增或修改时,更新当前节点,先将当前节点的加载状态修改为未加载
node.loaded = false
node.loadData() // 重新查询当前节点的所有子元素
},
// 保存
savaData(){
this.$Modal.confirm({
title: '是否保存?',
okText: '确定',
cancelText: '取消',
type: 'success',
onOk: () => {
addEbomMaterial(this.formData).then(res => {
if (res.code === 200) {
// 刷新数据
this.formData.ehid = res.data
// 如果节点还未存在结构时代表节点还未存在,此时需要先查询最初的结构
if(this.currentNode == null){
this.searchEbomstruct(this.formData.ehid)
}else{
// 如果已经存在结构时刷新结构
this.partialRefresh()
}
// 刷新头信息
this.initEbomHeaderByMbno(res.data)
// 查询列表数据
this.getEbomMaterialData(res.data)
this.$Message.success('操作成功')
}
}).catch(function () {
})
}
})
},
}
不存在节点时不在节点中显示箭头
实现不存在节点树结构不显示箭头的主要点是props中设置的isLeaf属性,因为前台不好区分节点是否存在子节点。我是在写后台接口时返回一个对应的属性用于辨别是否子节点存在下节点。
当树节点的节点获取到isLeaf为true时代表该节点的街头需要隐藏,否则就显示箭头。