el-table pagination retains the checked data

1. Target effect

        All the code is written in App.vue below, just copy and paste to run 

       

        Currently selected 5 pieces of data

        

        Click below to switch pages, the selected data disappears

  

2. Principle

        (1) el-table check box, use a variable array selectedRow:[ ] to monitor which data is selected

<el-table-column type="selection" width="55"></el-table-column>

        el-table itself has a method to monitor the change of the check box in the table: @selection-change, the callback function parameter is the selected table data 

<el-table :data="tableList" border style="width: 100%" @selection-change="val => selectedRow = val">

         (2) Save the selected data:

        Add row identification in el-table : row-key="val => val.date", the callback function parameter is the data of each row of the table, here it is best to choose the data that can uniquely identify each row as the return value of the key, otherwise Failed to save selection

<el-table :row-key="val => val.date" :data="tableList" border style="width: 100%"
      @selection-change="val => selectedRow = val">

Add : reserve-selection="true"          to the checkbox

      <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>

        (3) The principle of slice paging:

        Here, there is no request to the background to obtain data. I manually created an array, cut it through slices, and requested the background to obtain data. The above method can also turn pages to save the selected data.

       slice(start, end) : return a new array, without changing the original array, the interval has a head but no end [start, end)

        Pagination formula: slice( (number of pages-1) * size per page, number of pages * size per page )

        For example:

                number of pages = 1, size per page = 5

                    slice(0, 5) => takes the array index as 0, 1, 2, 3, 4 elements, because the array starts from 0

                Number of pages = 2, Size per page = 5

                    slice(5, 10) => take the elements whose index is 5, 6, 7, 8, 9

                .......

3. Source code

<template>
  <div id="app">
    <div>已选中了条数: {
   
   { selectedRow?.length }}</div>
    <el-table :row-key="val => val.date" :data="tableList" border style="width: 100%"
      @selection-change="val => selectedRow = val">
      <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="55" label="序号"></el-table-column>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pageConfig.pageNum" :page-sizes="[1, 2, 5, 10]" :page-size="pageConfig.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="pageConfig.total">
    </el-pagination>
  </div>
</template>
 
<script>

export default {
  name: 'App',
  data() {
    return {
      pageConfig: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      selectedRow: [],
      tableData: [{
        date: '2016-05-01',
        name: '王小虎',
        address: '北京'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '广州'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '深圳'
      },
      {
        date: '2016-05-05',
        name: '王小虎',
        address: '杭州'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '武汉'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '长沙'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '佛山'
      }, {
        date: '2016-05-09',
        name: '王小虎',
        address: '东莞'
      }, {
        date: '2016-05-10',
        name: '王小虎',
        address: '成都'
      }],
      tableList: []
    }
  },
  created() {
    this.pageConfig.total = this.tableData.length;
    this.getList(this.pageConfig.pageNum, this.pageConfig.pageSize)
  },
  methods: {
    // 监听页面大小变化
    handleSizeChange(val) {
      this.getList(this.pageConfig.pageNum, val)
    },
    // 监听当前页变化 (currentPage-1)*pageSize,pageSize
    handleCurrentChange(val) {
      this.getList(val, this.pageConfig.pageSize)
    },
    // 获取表格数据
    getList(pageNum, pageSize) {
      this.tableList = this.tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
    }
  }
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>