vue+elementUI 实现table删除多行

最新推荐文章于 2024-08-07 12:59:51 发布

zhaoyy0513

最新推荐文章于 2024-08-07 12:59:51 发布

阅读量4k

点赞数 8

分类专栏： vue elementUI 前端

本文链接：https://blog.csdn.net/zhaoyy0513/article/details/100517054

版权

前端同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

elementUI

4 篇文章 0 订阅

订阅专栏

template

        <el-table
          :data="badCodeTableData"
          :default-sort="{ prop: 'id', order: 'ascending' }"
          border
          tooltip-effect="dark"
          height="280"
          @selection-change="badCodeResolveChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="序号" width="110">
          </el-table-column>
          <el-table-column prop="code" label="不良代码编号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="不良代码名称" width="180">
          </el-table-column>
          <el-table-column prop="description" label="不良代码描述" width="250">
          </el-table-column>
        </el-table>

         <el-button
          size="small"
          class="remove"
          icon="el-icon-delete"
          @click="badCodeRemoveHandle"
          >删除</el-button
         >

method

    badCodeResolveChange(rows) {
      // 用一个变量来存放被选中的index
      this.badCodeSelection = rows;
      //console.log(this.badCodeSelection);
    },

    badCodeRemoveHandle() {
      this.badCodeSelection.forEach((item) => {
        for (let i = 0; i < this.badCodeTableData.length; i++) {
          if (this.badCodeTableData[i].id === item.id) {
            this.badCodeTableData.splice(i, 1);
            break;
          }
        }
      });
      this.badCodeSelection = [];
    },