table 多选,可以实现翻页多选
壹、table 翻页多选
一、element ui 官网地址
二、自己项目代码实现
2.1 :row-key="getRowKeys"
要写
//渲染
getRowKeys(row) {
// console.log("11111111111111", row);
return row.product_id;
//这个可以区分数据的唯一性就好
},
2.2 :reserve-selection="true"
写上
<el-table-column type="selection" width="55" :reserve-selection="true" :selectable="checkCpMoreSelectable"></el-table-column>
2.3 :selectable="checkCpMoreSelectable"
控制当前行是不是可以选
// 控制是否可以选择
checkCpMoreSelectable(row) {
// return row.stock_num != 0;
// 不限制
return true
},
2.4 注意 清选中的样式
重新进入页面时 需要将前面选中的样式 清空
//清选中样式和数据
this.$refs.multipleTable.clearSelection();//清空选择样式
表格代码:
<el-table ref="multipleTable" :data="cpMoreList" :row-key="getRowKeys" style="width: 100%; margin-top: 16px" height="420" border :header-cell-style="tableHeaderColor" @selection-change="handleMoreCpChange">
<el-table-column type="selection" width="55" :reserve-selection="true" :selectable="checkCpMoreSelectable"></el-table-column>
<el-table-column prop="xh" label="序号" width="120"></el-table-column>
</el-table>
贰、 table 翻页 序号
e.xh = this.PageSize * (this.pageNum - 1) + index + 1 < 10 ? "0" + (this.PageSize * (this.pageNum - 1) + index + 1) : this.PageSize * (this.pageNum - 1) + index + 1;