天天看點

elementui分頁記錄,reserve-selection

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" 事件

效果圖:

elementui分頁記錄,reserve-selection
elementui分頁記錄,reserve-selection