若依分离版导出，多选，行选择，翻页记忆已选

记录：

首先是vue页面中el-table修改的地方增加：

1. ref（方便引用组件，个人理解类似id）；
2. :row-key（给每行添加key，我这里放的row.id）；
3. @row-click（行点击事件，用于选中）；

然后selection多选框列增加：

1. :reserve-selection="true"（在数据更新之后保留之前选中的数据，此属性只对多选框列有效，且跟row-key关联）；

以下是前台代码：

    <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange"
     ref="multipleTable"
     :row-key="getRowKeys"
     @row-click="handleRowClick" >
      <el-table-column type="selection" :reserve-selection="true" width="55" align="center" />
      <el-table-column label="主键id" align="center" prop="id" v-if="false"/>
      <el-table-column label="测量流水号" align="center" prop="serialNum" width="180"/>
    </el-table>

 methods中新增方法：

    getRowKeys(row) {
        return row.id;
    },
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },

 若依自带的handleSelectionChange方法中，对选择的id做了遍历，放在this.ids中，因此直接使用this.ids即可，导出方法我做了调整，将ids拼接在请求url后

  /** 导出按钮操作 */
    handleExport() {
      this.download('web/record/export/' + this.ids, { ...this.queryParams}, `record_${new Date().getTime()}.xlsx`)
    },

---

然后是后台的代码做了修改，增加了ids参数接收。根据ids查询数据。参数若依的deleteByIds

    @PostMapping("/export/{ids}")
    public void export(HttpServletResponse response, BusiMemberScaleRecord busiMemberScaleRecord, @PathVariable("ids") Long[] ids)
    {
        List<BusiMemberScaleRecord> list = busiMemberScaleRecordService.selectBusiMemberScaleRecordByIds(ids);
        ExcelUtil<BusiMemberScaleRecord> util = new ExcelUtil<BusiMemberScaleRecord>(BusiMemberScaleRecord.class);
        util.exportExcel(response, list, "记录数据");
    }