树结构处理

树结构的处理,表格插入输入框 根据当前行的key,删除该项

1:表格插入输入框,
2:根据当前行的key,删除该项

setState React 中使用的
实现效果图
在这里插入图片描述

代码
dataSource:树结构,树的深度不确定
record 点击的当前行

isEditIndex 自己添加的,点编辑的时候显示输入框*
新增
handleClick(record,event) {
let data = this.state.dataSource
this.getParent(data,record)
console.log(‘data’,data)
}
getParent(data,record) {
data.forEach(item => {
if(item.key == record.key){
let num = 0
if(item.hasOwnProperty(“subList”)){
num = item.subList.length +1
}else{
item.subList =[]
num =1
}
item.subList.push(
{
key:item.key + ‘-’ + num,
isEditIndex:false
}
)
}else if(item.subList && item.subList.length > 0){
this.getParent(item.subList,record)
}
})
this.setState({dataSource:data})
}
删除
根据当前数据key,查找以后删除该项
handleDelete(record) {
let dataDel = this.state.dataSource
this.removeChild(dataDel,record)
}
根据当前数据key,查找以后删除该项
最后返回这个数据**
removeChild(data,record){
for(let i=0;i<data.length;i++){
let temp = data[i]
if(temp.key === record.key){
data.splice(i,1)
}else if(temp.hasOwnProperty(“subList”)){
this.removeChild(temp.subList,record)
if(temp.subList.length === 0){
delete temp.subList
}
}
}
this.setState({dataSource:data})
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值