需求如题，当我们拿到table数据的时候，对象里是不带有index下标的，所以我们可以使用row-class-name这个属性为每行的对象增加一个index。
页面创建一个table
<template>
<el-table
:data="dataList"
:row-class-name="rowDataIndex"
@selection-change="handleDataSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="编号" align="center" prop="num" />
<el-table-column label="名称" align="center" prop="name" />
</el-table>
<el-button type="danger" icon="el-icon-delete" size="mini"
@click="handleDeleteData">删除选中行</el-button>
</template>
声明列表数据，选中数据变量
data() {
return {
// 列表数据
dataList: [],
// 选中数据
checkedData: [],
}
}定义方法
- 给每行增加index参数，值为下标
- 选中复选框时，将下标装进checkedData
- 过滤checkedData中的下标，更新列表数据
methods: {
/** 维护序号 */
rowDataIndex({ row, rowIndex }) {
// 给每行增加index参数，值为下标
row.index = rowIndex + 1;
},
/** 复选框选中数据 */
handleDataSelectionChange(selection) {
// 将下标装进checkedData
this.checkedData = selection.map(item => item.index)
},
/** 删除按钮操作 */
handleDeleteData() {
if (this.checkedData.length == 0) {
this.$modal.msgError("请先选择要删除的数据");
} else {
const dataList = this.dataList;
const checkedData = this.checkedData;
// 筛选不在checkedData中的下标，更新列表数据
this.dataList = dataList.filter(function(item) {
return checkedData.indexOf(item.index) == -1
});
}
},
}filter()是一个常用的操作，用于把数组的某些元素的筛选，然后返回剩下的元素。和map()类似，filter()也接收一个数组。和map()不同的是，filter()把传入的数组中的集合依次筛选每个符合条件的集合，然后根据返回值是true还是false决定保留还是丢弃该元素。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/137322.html
