我现在在做一个element树的功能,就是删除的时候需要往后台传一个id, 新增的级数没有这个id,新增成功后后台会返回来这个id,那我在删除方法里怎么能获取到这个poBomDetailId呢 我的问题就是我现在删除不了新建的一级,因为没有取到新建的时候返回来的poBomDetailId,删除树需要往后台传poBomDetailId,新建的时候这个值是空的,新建成功后后台会返回poBomDetailId值,如何在删除方法里获取它
如何能在删除的方法里取到新建这级返回的id呢,希望会的同学可以提供代码,只提供思路我可能写不出来T^T
// 增加子级节点事件
addChildNode(node,data) {
if(node.level >= this.MAX_LEVEL){
this.$message.warning("当前已达到"+ this.MAX_LEVEL + "级,无法新增!")
return false;
}
// console.log(this.checkTreeNode.leafNodeFlag)
let sourceId = Math.ceil(Math.random() * 100);
this.$prompt("请输入节点名称", "新增", {
confirmButtonText: "确定",
cancelButtonText: "取消",
})
.then(({ value }) => {
// const newChild = { id: sourceId++, sourceName: value, children: [] };
// if (!data.children) {
// this.$set(data, "children", []);
// }
// data.children.push(newChild);
// const newChild = { id: sourceId++, sourceName: value, children: [] };
const getSortNum = (data)=>{
const {children,sortNum } = data
let max = -1
if (children) {
children.forEach(e=>{
const _sum = e.sortNum.split('.')
const _last = Number(_sum[_sum.length - 1])
if(max < _last){
max = _last
}
})
}else{
max = 0
}
return sortNum + '.' +( max + 1)
}
addTreeNode(
{
sortNum: getSortNum(data),
sourceName: value,
poHeaderId: this.routeParams.poHeaderId,
poNumber: this.routeParams.poNumber,
sourceId: '0000',
parentBomDetailId: this.checkTreeNode.poBomDetailId,
leafNodeFlag: 'S'
}
).then((response) => {
// data = response.data
const newChild = { id: sourceId++, sourceName: value, children: [] };
if (!data.children) {
this.$set(data, "children", []);
}
data.children.push(newChild);
this.$message.success('添加成功')
if(this.checkTreeNode.children){
this.checkTreeNode.leafNodeFlag = 'N'
}
console.log(data.children)
console.log(data.poBomDetailId)
});
})
.catch(() => {});
// return response.data
},
// 删除树节点
deleteNode(node,data) {
console.log(data.leafNodeFlag)
console.log(data.children)
console.log(data.poBomDetailId)
// console.log(data)
// let temptArr = [];
// const keyId = data.poBomDetailId
// temptArr = this.getAllParentArr(data, keyId);
// console.log(temptArr)
if(!data.children && this.checkTreeMaterList.length == 0){
this.$confirm(确定删除'${this.checkTreeNode.sourceName}'节点, 是否继续?
,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).then(() => {
//删除树需要往后台传poBomDetailId
const id = data.poBomDetailId
const parent = node.parent;
const children = parent.data.children || parent.data;
deleteTreeNode(id).then((response) => {
const index = children.findIndex(d => d.sourceId === data.sourceId);
children.splice(index, 1);
this.$message.success('删除成功')
if(!node.parent.data.children || node.parent.data.children.length == 0){
node.parent.data.leafNodeFlag = "S"
}
});
})
.catch(() => {});
}else if(data.children){
this.$message.warning("当前分类下有子分类无法删除!")
}else if(this.checkTreeMaterList.length > 0){
this.$message.warning("当前分类下有信息无法删除!")
}else{
}
},
在请求完成后再添加节点到tree
<template>
<div id="app">
<el-tree
v-loading="loading"
:data="data"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="() => append(node, data)">
add
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)">
del
</el-button>
</span>
</span>
</el-tree>
</div>
</template>
<script>
export default {
data () {
return {
data: [{
id: 1,
label: '一级',
children: [{
id: 4,
label: '二级',
children: [{
id: 9,
label: '三级'
}, {
id: 10,
label: '三级'
}]
}]
}],
loading: false
}
},
methods: {
append (node, data) {
this.$prompt('请输入节点名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
// 这里发起添加节点请求
// 模拟请求
this.loading = true
this.addRequestDemo().then(res => {
// 添加成功 再创建节点,把请求返回的id置入
const newChild = { id: res, label: value, children: [] }
if (!data.children) {
this.$set(data, 'children', [])
}
data.children.push(newChild)
this.loading = false
}).catch(() => {
// 添加失败操作
})
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
})
})
},
remove (node, data) {
console.log(data.id) // 节点id
},
addRequestDemo () {
return new Promise(reslove => {
let id = null
setTimeout(() => {
id = Math.floor(Math.random() * 1000)
reslove(id)
}, 500)
})
}
}
}
</script>
能提供一下数据结构不?