Vue中使用Element-UI實現表格跨頁多選

跨頁多選翻頁保存問題折磨了我一天，終於找到了合適的解決方法分享一下。

需求：

項目中使用Element-UI：

• 表格中數據通過網絡請求得到；
• 給后台接口發送頁碼（pagenum）和每一頁條數（pagesize）實現數據分頁；
• 實現單頁內全選
• 翻頁保存之前選中的數據

解決方式：

使用官方文檔中提供的row-key屬性和reserve-selection屬性搭配使用

• 在表格中設置row-key屬性，並將該屬性設置為當前渲染數據的json中的唯一標識（比如id之類，我的例子里字段名叫bridgecode

在使用 reserve-selection 功能的情況下，該屬性必填。

• 在表格的多選框行中設置reserve-selection屬性，當reserve-selection屬性為true時，數據更新之后保留之前選中的數據。

<el-table ref="multipleTable" :data="reportList" @selection-change="handleSelectionChange" row-key="bridgecode">
    <el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>


<script>
method:{
    handleSelectionChange(val) {
        //這個val是所有已選中的json的數組
        this.multipleSelection = val;
    },
}
</script>