业务:每一层级单独获取操作
关键词:updateKeyChildren(更新子节点)
思路:
添加:
1.先获取当前节点子集数组
let children = this.node.childNodes.map(function(item) {
return item.data
})
2.把新增数据(调用接口结束后)加到children中然后更新节点
children.unshift(data)
this.$refs.tree.updateKeyChildren(this.node.data.id, children)
修改:
第一级直接调用接口刷新,
下级先获取父级(parentNode)id,然后通过接口获取数据(调用接口结束后)通过updateKeyChildren(更新节点) this.$refs.tree.updateKeyChildren(父id, 获取的数据)
1.调用接口获取数据 2.修改dom
dom
<div class="leftArea">
<el-tree
accordion
:props="{ label: 'caption' }"
:data="tableDataTree" // 接口获取树 可直接获取第一层
node-key="id" // 标识必须有
:load="middleLoadNode" // 动态,懒加载--子集调用接口获取
@node-click="nodeClick"
lazy // 懒加载
ref="tree"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button type="text" size="mini" @click="() => append(data, node)">
添加
</el-button>
<el-button type="text" size="mini" @click="() => edit(data)">
修改
</el-button>
<el-button type="text" size="mini" @click="() => remove(data.id)">
删除
</el-button>
</span>
</span></el-tree
>
</div>
js
设置动态懒加载
async middleLoadNode(tree, resolve) {
// 懒加载中间树第一层后面所有层
if (tree.data.id != undefined) {
const params = {
parentid: tree.data.id, // 父id
column: 'stepno', //排序字段
order: 'ASC' //
} // 根据情况传参
getDicWorkProcess(params) // 获取子节点数据接口
.then(res => {
console.log(res)
return resolve(res.result.records) // 返回数据到树里面
})
.catch(err => {
console.log(err)
})
}
},
append(row, node) { // 新增按钮
this.type = 'middleTree'
this.node = node //此项获取node其他参数为业务数据--用于更新tree 获取node.id
this.middleData = row
this.moduelType = 'middle:add' // 接口标识
this.dialogVisible = true
this.mainForm = addVo()
this.mainForm.parentid = row.id // 获取父id
this.mainForm.stationcode = row.stationcode
this.dialogTitle = '流程添加'
},
edit(row) { // 修改按钮
this.type = 'middleTree'
this.moduelType = 'middle:edit' // 接口标识
this.dialogVisible = true
this.mainForm = row
this.dialogTitle = '流程修改' // 右侧向点修改
},
async submit() {
let children = this.node.childNodes.map(function(item) {
return item.data
})
const fn = {
'middle:edit': editDicWorkProcess,
'middle:add': addDicWorkProcess
}
const query = this.mainForm
const { message, result: data, success } = await fn[this.moduelType](query)
if (!success) return this.$alert(message)
if (success) {
if (this.state == 'edit') {
if (this.mainForm.steplevel == 1) {
this.initTree() // 第一级直接刷新接口
} else if (this.mainForm.steplevel != 1) { // 其他下级 先获取其父级id调接口
const params = {
parentid: this.parentNode.data.id,
column: 'stepno', //排序字段
order: 'ASC' // ASC正序DESC倒序默认倒序
}
const { result: res } = await getDicWorkProcess(params)
console.log(res) // 获取的数据替换父级的子集(自己)
// 修改
this.$refs.tree.updateKeyChildren(this.parentNode.data.id, res.records)
}
} else if (this.state == 'append') {
if (data) {
children.unshift(data)
this.$refs.tree.updateKeyChildren(this.node.data.id, children)
}
}
this.close()
this.$alert(message)
}
},
remove(id) { // 删除
this.$confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteDicWorkProcess({ id: id }).then(res => {
if (res.success) {
this.$message.success('删除成功!')
const { tree } = this.$refs
tree.remove(id)
} else {
this.$message.warning('删除失败!')
}
})
})
},
问题请留言