element-ui table跨页勾选简单实现(个人笔记)

背景：批量导出的时候，想实现分页之后还能记住前面的勾选，以导出不同页所勾选中的行。

仔细看文档，会发现有这么一个属性，可以记住我们的勾选。（以前没仔细看文档，实现类似的功能，非常心累!）

关键属性：row-key、selection-change和reserve-selection

 <el-table 
 :data="tableData"
 ref="tableData"
 border
 row-key="id"
 @selection-change="handleSelectChange"
 :row-class-name="tableRowClassName">
      <el-table-column type="selection" width="50" align="center" :reserve-selection="true"></el-table-column>
      <el-table-column align="center" label="编号"></el-table-column>
      ...
 </el-table>

handleSelectChange(rows) {
    // 这里的rows已经是跨页的所选中的行
    this.selectArr = rows
},
// 批量导出
handleBacthExport() {
    if(!this.selectArr.length) {
       this.$message.warning('请勾选要导出的数据')
       return
    }
    let list = this.selectArr.map(i => i.id)
    this.$axios.exportDrawSelectionSet(list, {
        responseType: "blob"
    }).then(res => {
        exportExcel(res) // 导出excel
        // 导出成功，清空勾选
        this.selectArr.forEach(row => {
            this.$refs.tableData.toggleRowSelection(row, false)
        })
    })
},