table组件做翻页保存已选数据功能

vue+iview table组件做翻页保存已选数据功能

应用场景：

使用Table + Page 组件时，当操作分页后，需保留已选择数据。

思路：

保存数据：当操作分页前，将已经选择数据保存。

数据渲染：分页后，判断当前页是否有已选中数据，如果有，则渲染。

查阅iview官网可得：

1- 使用@on-select 和 @on-selection-change 方法可以得到当前页选中的数据。

2- 调用 @on-change 方法 进行当前页码数据存储。

 百度可得：

1- 如何设置Table组件默认选选中

this.$refs.table.$refs.tbody.objData[index]._isChecked = true;

代码：

1- HTML代码：

<Table
   ref="table"
   :columns="talbeColumns"
   :data="tableData"
   border
   @on-select="onSelect"
   @on-selection-change="onSelectionChange"
>
</Table>

<Page
  :current="page.currentPage"
  :total="page.totalRecord"
  :page-size="page.pageSize"
   @on-change="onChangePage"
   show-total
/>

2- data定义变量： 

//  请求列表数据的参数
queryForm: {
  currentPage: 1,
  pageSize: 10,
  search: {},
},

// 列表数据
tableData: []

// 页码合集
pageChange： [],

// 当前页面选中的数据
selectedData: [],

// 所有选中的数据
allData: [],

3- methods代码：

// 获取列表
getTableData() {
    this.$api.xxxx.xxxx(this.queryForm)(res => {
        if(res && res.data){
            this.tableData = res.data;
            this.page.pageSize = res.fields.pageSize; // 每页条数
            this.page.currentPage = res.fields.currentPage; // 当前在那页
            this.page.totalRecord = res.fields.totalRecord; // 数据总数
            // 数据回显
            if (this.pageChange.indexOf(res.fields.currentPage) !== -1) {
            this.selectedData = this.allData[
                this.pageChange.indexOf(res.fields.currentPage)].selectedData;
            this.tableData.forEach((obj, index) => {
              this.selectedData.forEach((item) => {
                // id为单条数据的唯一标识
                if (obj.id === item.id) {
                  setTimeout(() => {
                    this.$refs.table.$refs.tbody.objData[
                      index
                    ]._isChecked = true;
                  }, 10);
                }
              });
            });
          }

        }
    })
}

// 获取当前页面选中的数据
onSelect(selection) {
    this.selectedData= selection;
},
onSelectionChange(selection) {
    this.selectedData= selection;
},

// 分页前保存已选数据
onChangePage(page) {
    // 根据页码，将对应勾选的数据保存
    let obj = {
        currentPage: this.queryForm.currentPage,
        selectedData: this.selectedData,
    };
    // 根据页码判断，需要新纪录的是替换还是新增
    if (this.pageChange.indexOf(this.queryForm.currentPage) === -1) {
        // 不存在 -->  新增
        this.pageChange.push(this.queryForm.currentPage);
        this.allData.push(obj);
    } else {
        // 存在  -->  将旧值换为新值
        this.allData[this.pageChange.indexOf(this.queryForm.currentPage)] = obj;
    }
    // 分页获取数据
    this.queryForm.currentPage = page;
    this.getTableData();
    // 置空
    this.selectedData = []
},

 4- 注意：

当我们对列表操作结束后，最后一个列表页面所操作的数据并未存在在allData中，所以此时我们需要在对勾选的数据操作前在次进行一次如下操作

let obj = {
    currentPage: this.queryForm.currentPage,
    selectedData: this.selectedData,
};
if (this.pageChange.indexOf(this.queryForm.currentPage) === -1) {
    this.pageChange.push(this.queryForm.currentPage);
    this.allData.push(obj);
} else {
    this.allData[this.pageChange.indexOf(this.queryForm.currentPage)] = obj;
}