最近有個需求蚌卤，element-ui表格多選实束，翻頁的時候選中的選項不會被清空奥秆。
我用的element-ui版本是：2.8.2
下面是關鍵代碼，模擬數(shù)據(jù)和分頁根據(jù)自己需求加
<el-table :data="productList"
ref="multipleTable"
:row-key="getRowKeys"
@selection-change="handleSelectionChange">
<el-table-column type="selection" :reserve-selection="true" width="60" align="center">
</el-table-column>
<el-table-column label="基金名稱" width="200" prop='fund_name'>
</el-table-column>
</el-table>
export default {
data() {
return {
productList: [],
selectList: [],
getRowKeys (row) {
return row.fund_id // fund_id是唯一標識
},
}
},
methods: {
// 選項發(fā)生變化時觸發(fā)
handleSelectionChange (val) {
// val代表整個表格選中的行數(shù)據(jù)
this.selectList = val
console.info(val)
// console.info(val.map(item => item.fund_id)) // 打印出選中行的fund_id集合
}
}
}
關鍵：
1咸灿、設置column的type為selection ,設置屬性:reserve-selection="true"
2.table加上屬性:row-key,row-key必須唯一
3.如果請求完接口想清空表格所選：
this.$refs.multipleTable.clearSelection()
有一個問題构订，點擊全選的時候，只能全選當前頁避矢。
————————————————
版權聲明：本文為CSDN博主「MISS_CJL」的原創(chuàng)文章悼瘾，遵循CC 4.0 BY-SA版權協(xié)議，轉載請附上原文出處鏈接及本聲明审胸。
原文鏈接：https://blog.csdn.net/MISS_CJL/article/details/102601750
