elementui分頁記錄,reserve-selection
作用:實作多選框選擇後,點選下一頁可以記錄多選框狀态。
第一步:
在<el-table></el-table>标簽中加上 :row-key="getRowKeys"
第二步:
在<el-table-column type="selection"></el-table-column>此行加上:reserve-selection="true"
第三步:
在 data() {
return {
multipleSelection:[],//複選框
getRowKeys(row) {//記錄每行的key值
return row.id;//id 自己檢視 row 裡的資料
},
select_order_number:'',//表格select選中的條數
select_orderId:[],//表格select複選框選中的id
}
}
第四步:
handleSelectionChange(rows) {//複選框
this.multipleSelection = rows;
this.select_order_number = this.multipleSelection.length;
this.select_orderId = [];
if (rows) {
rows.forEach(row => {
if (row) {
this.select_orderId.push(row.id);
}
});
}
}
第五步:
在<el-table></el-table>标簽中加上 @selection-change="handleSelectionChange" 事件
效果圖: