iView的Table组件
前端在多选时如果点击下一页则丢失了上一页Table的多选数据（由于采用的后端分页，每次翻页会直接刷新为新数据）
定义变量
loading: false,columnsData: [], //表格表头talbeData: [], //表格数据 params: {total: 0,page: 1,limit: 10},//请求参数selectedData: [],//选中的数据defSelectData: [] // 去重数据
页面实现
<Table border stripe ref="table" :loading="loading" :columns="columnsData" :data="talbeData" @on-select="onSelectAll" @on-select-cancel='onSelectCancel' @on-select-all="onSelectAll" @on-select-all-cancel='onSelectAllCancel'></Table> <Page :total="params.total" :current="params.page" :page-size="limit" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
表格点击触发
// 全选 触发 onSelectAll(selection) {// 去重之前的 选中后合并的数组this.defSelectData = [...selection, ...this.defSelectData]for (let val of this.defSelectData) {if (!this.selectedData.some(item => item.ID === val.ID)) {this.selectedData.push(val)}}},// 取消选中 时触发 onSelectCancel(selection, row) {let result = this.selectedData.findIndex((el) => {return el.ID === row.ID})this.selectedData.splice(result, 1)},// 取消全选 触发 onSelectAllCancel() {this.selectedData = this.selectedData.filter(item => {return this.talbeData.every(el => {return item.ID !== el.ID})})},
点击分页，取到新一页的数据，进行选中回显
// 获取数据 getTableData() {this.loading = truegetDepUserList(this.params).then(res => {this.loading = falselet data = res.datadata.list.forEach(item => {//选中数据回显this.$set(item, '_checked', this.selectedData.some(el => el.ID === item.ID));});this.params.total = data.countthis.talbeData = data.list})},changePage(page) {this.params.page = pagethis.getTableData()},changeSizeMember(size) {this.params.limit = sizethis.getTableData()},
