vue2版本elementUI的table分页实现多选逻辑

1. 需求

我们需要在表格页上实现多选要求，该表格支持分页逻辑。

2. 认识属性

表格属性

参数	说明	类型	可选值	默认值
data	显示的数据	array	—	—
row-key	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。	Function(row)/String	—	—

表格事件

事件名	说明	参数
selection-change	当选择项发生变化时会触发该事件	selection

表格方法

方法名	说明	参数
clearSelection	用于多选表格，清空用户的选择	—
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected
toggleAllSelection	用于多选表格，切换所有行的选中状态	-

表格列属性

参数	说明	类型	可选值	默认值
type	对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮	string	selection/index/expand	—
selectable	仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选	Function(row, index)	—	—
reserve-selection	仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）	Boolean	—	false

3. 具体代码

<template>
<div><el-tablev-if="tableVisible"ref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"row-key="id"@selection-change="handleSelectionChange"><el-table-column:reserve-selection="true":selectable="judgeSelectable"type="selection"width="55"></el-table-column><el-table-columnlabel="id"width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column></el-table><el-pagination:current-page="pageNum":page-sizes="[10, 20, 50, 100]":page-size="pageSize"layout="total,  prev, pager, next, sizes, jumper":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/>
</div>
</template>

  export default {data() {return {tableData: [{id: 1,name: '王小虎1'}, {id: 2,name: '王小虎2'}, {id: 3,name: '王小虎3'}, {id: 4,name: '王小虎4'}, {id: 5,name: '王小虎5'}, {id: 6,name: '王小虎6'}, {id: 7,name: '王小虎7'}],multipleSelection: [],total: 0,pageSize: 10,pageNum: 1,tableVisible: true}},created() {this.initData();},methods: {initData() {this.getList();this.getSelectedList();},getSelectedList() {//	当拿到已选列表时，调用toggleSelection传入已选列表},judgeSelectable(row, index) {// 用来区分是否可选return Math.random() > 0.5;},toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},handleSelectionChange(val) {this.multipleSelection = val;},getList() {//	获取数据，更新tableData和total},//  分页size变化handleSizeChange(val) {this.pageSize = val;this.getList();},//  当前页面变化handleCurrentChange(val) {this.pageNum = val;this.getList();},//	必须这么处理toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},//	批量导入或者其他场景下已选数据已更新，就重新处理下页面内容regetData() {this.total = 0;this.pageNum = 1;this.tableData = [];this.multipleSelection = [];this.tableVisible = false;this.$nextTick(() => {this.tableVisible = true;this.initData();})}}}

4. 解读

分页不需要介绍，主要还是多选说一点。

1. 表格上必须设置row-key，该字段的值不可重复，这样让表格记住每个数据。
2. selection-change字段用来监听选择变化，因el-table未提供批量选中方法，故只能调组件上的toggleRowSelection方法一个一个选中。如果需要监听selection-change方法变更记录，最好还是防抖处理，避免初始化一个一个选中导致的数据异常。
3. el-table-column 使用 type 值为 selection, 该组件上需要设置 reserve-selection 为 true，相关属性解说请看2中解释。属性selectable 则是用来控制是否可选，这个业务功能也要了解下。
4. 至于具体逻辑可以参考上面代码，有问题来找我。

求关注