Your spark is not your purpose，that last box fills in when u are ready to come live.
未必需要有所成就的活着，享受日常也很好。? ? ? ? ?-------心灵奇旅
功能简介：
1. 实现批量删除功能
2. 根据条件设置含有不能选中行的表格
?
目录
一、基础的多选el-table
ElementUI 提供了多选行table，同时若依框架也提供了成熟的多选表格。
1.table基础结构
需要绑定selection-change方法
<el-table
v-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-button
size="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(() => {});
},三、含有不能选中行的表格
?非常简单，只需要为表格的selection这一列添加:selectable="selected"
<el-table-column type="selection" width="55" align="center" :selectable="selected" />同时，在方法中添加判断条件，本示例中是通过“是否已经组合产品”来判断。
// 多选框是否可以选中
selected(row, index) {
if (row.isGroup == 1) {
return false; //不可勾选
} else {
return true; //可勾选
}
},