框架Vue2.15.14,后台是Aps.net core Api
<el-table ref="multipleTable" :data="tableData" tooltip-effect="light" style="width: 100%;text-align: center;"
height="400" show-harder @selection-change="handleSelectionChange" border :header-cell-style="{ textAlign: 'center' }" :row-key="getRowKey">
<el-table-column type="selection" width="50" prop="id" :reserve-selection="true" style="text-align:center">
</el-table-column>
</el-table>
重点是el-table:@selection-change="handleSelectionChange"
:row-key="getRowKey"
首列selection 的 :reserve-selection="true" 能够实现界面翻页显示选中
Vue.js
export default {
name: 'DlgGarbageBox',
data() {
return {
HandleState: [],
dataPageIsLoading: false, // 数据分页列表是否加载中
searchParam: {
status: "",
key: "",
pageIndex: 1,
pageSize: 10,
orderColumn: null,
orderBy: null,
admin_lettr_ids:""
},
dataTotal: 0,
tableData: [],
currentrow: "",
multipleSelection: "",
selectArr:[],
}
},
methods: {
getRowKey(row) {
return row.id;
},
/**
* 获取分页列表 查询
*/
getPage() {
this.dataPageIsLoading = true;
this.$store.dispatch('getAdminLetterPage', this.searchParam).then((res) => {
this.tableData = res.list;
this.dataTotal = res.total;
this.dataPageIsLoading = false;
});
},
handleSelectionChange(rows) {
this.multipleSelection = rows;//每次选择的数据
if (rows.length == 0) this.selectArr = [];
else {
//每次选择的数据存起来
rows.forEach(row => {
if (row) {
if (this.selectArr.indexOf(row.id) == -1)
this.selectArr.push(row.id);
}
});
}
console.log(this.selectArr);
},
//导出
exportAdminLetter(){
console.log(this.selectArr);
this.searchParam.admin_lettr_ids=this.selectArr.join(',');
let request = {
...this.searchParam
}
this.isRequesting = true;
this.$store.dispatch('exportAdminLetter', request).then(
res => {
this.isRequesting = false;
this.searchParam.admin_lettr_ids="";
this.selectArr=[];
this.$refs.multipleTable.clearSelection();
},
err => {
this.isRequesting = false;
}
);
},
}
}
效果图:
不管怎么翻选择的依然都选中,点击导出 参数是选中的三条数据:
这样就实现了翻页选中导出