一、基础的多选el-table

ElementUI 提供了多选行table，同时若依框架也提供了成熟的多选表格。

1.table基础结构

需要绑定selection-change方法

<el-tablev-loading="loading"stripe:data="productList"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="序号" prop="index" width="55"><template slot-scope="scope"><span>{{ scope.$index + 1 }}</span></template></el-table-column><el-table-column label="组合编号" align="center"><template slot-scope="scope">{{scope.row.isGroup==1?scope.row.group.groupCode:''}}</template></el-table-column><el-table-column label="组合名称" align="center" prop="productGroupName"><template slot-scope="scope">{{scope.row.isGroup==1?scope.row.group.groupName:''}}</template></el-table-column>...<el-table-column label="产品状态" align="center" prop="prdtStatus" />
</el-table>

2.添加selection-change

ids用来保存select选中的行id；并使用single和mutiple记录选中情况。

// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// ===表格数据===
productList: [],

 
// 查询产品信息列表getList() {this.loading = true;getProductList(this.queryParams).then(response => {this.productList = response.rows;this.total = response.total;this.loading = false;});},
// 多选框选中数据handleSelectionChange(selection) {console.log("多选框选中数据");this.ids = selection.map(item => item.id);// 需要根据数据情况调整id名称this.single = selection.length != 1;this.multiple = !selection.length;},

二、实现批量删除功能

1.按钮相关

只有是multiple时，表示开启多选模式，才可以使用批量删除按钮

<el-buttonsize="small"@click="handleDelete()"class="btnItem"style="margin-left:10px;"icon="el-icon-delete":disabled="multiple"
>删除</el-button>

2.删除函数撰写

批量删除和行删除公用一个删除函数，通过是否有传参来区分。使用confirm二次确认。并最终调接口实现功能

// 删除handleDelete() {this.$confirm("是否确认删除选中的数据项?", "警告", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(function() {// return deleteGroup({ groupId: row.id });}).then(() => {this.queryParams.pageNum = 1;this.getList();this.msgSuccess("删除成功");}).catch(() => {});},

参考: 【Element UI样式优化】el-table多选行的实现 ==＞ 批量删除功能 ==＞ el-table含有不可选中行_el-table 批量删除index-CSDN博客