vue+elementUI 实现table删除多行（转载）

最新推荐文章于 2024-09-17 21:04:23 发布

brave_zhao

最新推荐文章于 2024-09-17 21:04:23 发布

阅读量1.2k

点赞数

分类专栏：前端开发

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

版权

前端开发专栏收录该内容

36 篇文章 3 订阅

订阅专栏

这篇博客探讨了如何在Vue.js中使用`el-table`组件进行数据展示，并展示了如何实现选择列和删除功能。`badCodeTableData`是表格数据源，`badCodeResolveChange`方法用于处理行选择变化，保存选中项。`badCodeRemoveHandle`方法遍历选中行并从数据源中移除，更新选中项列表。

摘要由CSDN通过智能技术生成

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 = [];
},