美文网首页
el-table删除选中的多行(无视id重复)

el-table删除选中的多行(无视id重复)

作者: 邓男子 | 来源:发表于2020-09-20 06:58 被阅读0次
    • el-table设置一个row-class-name来协助获取index
    <el-table :data="tableData"
                 :row-class-name="tableRowClassName"
                 tooltip-effect="light"
                 style="width: 100
    
    • 给el-table的row附上index的值
     tableRowClassName(row, index) {
            row.row.index = row.rowIndex;
          }
    
    • 把获得的下标放到selectionItemIndexes里
     handleSelectionChange(rows) {
            this.selectionItemIndexes = [];
            rows.forEach(item => {
              this.selectionItemIndexes.push(item.index);
            });
          },
    
    • 触发删除的函数
    deleteData() {
            this.tableData = this.tableData.filter((item, index) => {
              let arrlist = this.selectionItemIndexes;
              return !arrlist.includes(index);
            });
          }
    

    相关文章

      网友评论

          本文标题:el-table删除选中的多行(无视id重复)

          本文链接:https://www.haomeiwen.com/subject/ckruyktx.html