vue element组件树状表格删除某行数据实现代码

思路

通过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);
              }
            }
          }
      }
    },
  }

最简单最优雅也是最高效的解决方案，文章如果解决了你的问题，不妨点个赞对博主支持一下吧。

如果文章存在错误，或者说你有更好的解决方案，欢迎在评论区留言。

请尊重博主的劳动成果，未经允许，禁止转载。