element-ui table 的翻页记忆选中

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

公司中台项目刚开始开发，用了vue+element，需要许多前置调研，table的翻译记忆选中就是其中之一。

template：

<el-table
:ref="tableRef"
:data="tableData"
@select-all="handleSelect"
@select="handleSelect"
>
<el-table-column
type="selection"
width="55"
>
</el-table-column>
<el-table-column
v-for="item in tableColumns"
:key="item"
:property="item.property"
:label="item.label"
:width="item.width"
>
</el-table-column>
</el-table>
<el-pagination
layout="total,prev, pager, next, jumper"
:page-size="5"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:total="10">
</el-pagination>

tableRef 是上级传入的props，为了区分多个表格同时存在的情况。

tableData 和 tableColumns 都是从组件外传入的，不难理解。

将 select 和 select-all 事件集中到同一个事件 handleSelect, 因为用到的数据都是该事件返回的 row 。

翻页的 currentPage 和 handleCurrentChange 是翻页组件的当前页和页码改变的事件。

methods：

handleSelect(val){
const hasSave = this.selected.find(item => {
return item.page === this.currentPage
})
if(hasSave){
hasSave.rows = this.tableData.filter(item => {
return val.includes(item)
})
}else{
this.selected.push({
page: this.currentPage,
rows: val
})
}
},
handleCurrentChange(val){
// 向上传递事件
this.$emit('pageChange',val)
},
toggleSelection(){
this.$refs[this.tableRef].clearSelection()
const target = this.selected.find(item => {
return item.page === this.currentPage
})
if(!target) return
const rows = target.rows
if(rows && rows.length>0){
this.$nextTick(()=>{
rows.forEach(row => {
this.$refs[this.tableRef].toggleRowSelection(row)
})
})
}
},
getSelected(){
if(this.selected.length === 0){
return []
}
let result = []
this.selected.forEach(item => {
result = [...result,...item.rows]
})
return result
}