记录:
首先是vue页面中el-table修改的地方增加:
- ref(方便引用组件,个人理解类似id);
- :row-key(给每行添加key,我这里放的row.id);
- @row-click(行点击事件,用于选中);
然后selection多选框列增加:
- :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, "记录数据");
}