el-table跨页多项选中

本文意在解决用 element-ui 中 table 时，需要选中行，并且结合分页做翻页操作时，保留之前所有选中状态的数据

html部分

<!-- html代码块 -->
<!-- 表体 -->
<el-table
    ref="multipleTable"
    :data="tableData"
    row-key="index"
    @selection-change="selectionChange">
    <el-table-column type="selection" :reserve-selection="true" fixed="left" />
    <el-table-column prop="index" label="序号"  />
    ...
</el-table>	
<!-- 分页 -->
<el-pagination
    layout="total, sizes, prev, pager, next"
    :current-page.sync="currentPage"
    :page-size="pageSize"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"></el-pagination>

• el-table中要设置row-key，并设置tableData中的唯一值，比如index（若不设置时方法不生效、设置错误或值不唯一时控制台会报错）；
• el-table-column中的selection选框列设置reserve-selection为true（数据更新之后保留之前选中的数据）

js部分

// js代码块
selectionChange(val){
  this.tableSelectList = val
}

• 该方法在选中状态改变时（选中、取消）触发，可拿到选中行的全量数据供某些功能使用，比如：接口数据提交

拓展

表格配合表单查询时（或其他类似操作），每次执行查询需要将选中列表清除，但翻页时不清除

// js代码块
search(clean = true){
  this.tableData.splice(0) // 每次先将表格数据清除
  getTableData({ // 模拟接口
    ...data // 表单数据
  }).then(res => {
    this.tableData = res.List
    this.total = res.Total
    clean && this.$refs.multipleTable && this.$refs.multipleTable.clearSelection() 
    // clean 为 true 时清除选中，分页时传 false 则不会触发
  }  
},
handleSizeChange(val){
  this.pageSize = val
  this.currentPage = 1 // 改变页容，先将当前页码归 1
  this.search(false)
},
handleCurrentChange(val){
  this.currentPage = val
  this.search(false)
},

其实严格来说每次执行查询也要将当前页归1，此处就省略啦（狗头保命 o.0）