vue+elementUI 实现table删除多行
template<el-table:data="badCodeTableData":default-sort="{ prop: 'id', order: 'ascending' }"bordertooltip-effect="dark"height="280"...
·
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 = [];
},
更多推荐
已为社区贡献7条内容
所有评论(0)