element-ui 实现table可分页多选功能详解

前言

此篇文章是为了记录使用element-ui遇到的问题，希望此篇能解决你的BUG

---

一、实现步骤

1.el-table 标签代码

<el-table>标签中必须有：

• ref，比如ref=“multipleTable”
• row-key=“getRowKeys”

<el-table
      ref="multipleTable"
      :data="tableData"
      stripe
      row-key="getRowKeys"
      @selection-change="handleSelectionChange"
    >

2.设置第一列，为多选框

• 手动添加一个el-table-column，设type属性为selection，且设置reserve-selection

<el-table-column
        type="selection"
        width="55"
        :reserve-selection="true"
        align="center"
      />

3.添加函数

• getRowKeys()，用于获取当前行key
• handleSelectionChange()，用于获取多选框，选中的数据
• handleclose()，用于清空多选框，所有选中的数据，避免下一个批量操作中记录上一次选中的数据

getRowKeys(row) {
	return row.id
},

handleSelectionChange(val) {
    this.multipleSelection = val // 类型,multipleSelection: []
},

handleclose() {
    this.$refs.multipleTable.clearSelection()
},

---

总结

按照上述步骤，即可实现table在分页的情况下，实现多选的功能