Because vue has been used in the development project+ Element-ui So today, let's talk about the problem of multi page echo data when using multi selection of Table

(element UI official website: https://element.eleme.cn/#/zh-CN)

If you don't have much to say, first post the Table multi-choice Table code given by the element UI official website

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="date"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="full name"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="address"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">Switch the selected status of the second and third rows</el-button>
    <el-button @click="toggleSelection()">Deselect</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-08',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }],
        multipleSelection: []
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

It can be seen that the multi-choice of this table has been given very comprehensive. How to cancel the selection is very clear;

But when we have a lot of list data, we usually use paging. At this time, there is a problem: after the first page is selected, switch to the second page, and then switch to the first page, you will find that the selection of the first page is missing.

In fact, this pit is often encountered, but the document has given us a solution.

Using the combination of row key and reserve selection

Add attributes to the table:: row key = "(row) = > {return row.id}"

That is, bind a function to the row key, which returns the unique identification of each row of data

Add: reserve selection = "true" to the column tag of multiple selections to enable

Simple and fast: some scenes need to be echoed manually

For example, the echo of some parameters requested from the back end:

This is used at this time$ refs. multipleTable. toggleRowSelection(row); There's no way.

The selected status requires you to the Table. The data requested by the page can be echoed only when it corresponds to the parameters you selected. Sometimes it needs to be given to this because of the execution mechanism$ refs. multipleTable. toggleRowSelection(row); Method plus delay timer:

          this.tableData.map(item => {
            this.tableList.map(val => {
              if (item.id == val.id) {
                setTimeout(() => {
                  this.$refs.multipleTable.toggleRowSelection(item);
                }, 300);
              }
            })
          })