树结构的处理,表格插入输入框 根据当前行的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})
}