思路
通过scope.$index拿到所在行索引,将树状表格看作正常行表格,有序递归的遍历树状表格,能够确保行数正确递增。支持多级层次,下面js实现代码拷贝即用。
实现代码
data() {
return {
isDeleted:false,
row : 0,
tableData: [{
id: 123,
date: '20216-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
children: [{
id: 56,
date: '2016-05-021',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 3465435,
date: '2016-06-01',
name: '王小虎w12',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 345235,
date: '2016-06-01',
name: '王小虎w12',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 234,
date: '2016-06-01',
name: '王小虎w12',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 234234,
date: '2016-06-01',
name: '王小虎w12',
address: '上海市普陀区金沙江路 1519 弄'
}]
}, {
id: 345345,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 22,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 34,
date: '2016-05-213',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 34345,
date: '2016-05-345',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}, {
id: 32,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
children: [{
id: 56,
date: '2016-05-021',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 6789,
date: '2016-06-01',
name: '王小虎w12',
address: '上海市普陀区金沙江路 1519 弄'
}]
}]
}
},
methods: {
/**
* @param table 树状表格数据
@param rmIndex 要删除的行 0开始
*/
deleteNode(table,rmIndex){
this.isDeleted = false;
this.row = 0;
this.deleteNodeDo(table,rmIndex);
},
deleteNodeDo(table,rmIndex){
for(let index = 0;!this.isDeleted && index<table.length;index++){
if(this.row==rmIndex){
//删除行
table.splice(index,1);
this.isDeleted = true;
}
if(!this.isDeleted){
let childTable = table[index];
this.row++;
if(childTable.children!==undefined && childTable.children.length>0){
//递归子节点
this.deleteNodeDo(childTable.children,rmIndex);
}
}
}
}
},
}
最简单最优雅也是最高效的解决方案,文章如果解决了你的问题,不妨点个赞对博主支持一下吧。
如果文章存在错误,或者说你有更好的解决方案,欢迎在评论区留言。
请尊重博主的劳动成果,未经允许,禁止转载。