El-table Keeps the selected items after the page is turned

preface

In this week’s development, the ability to turn a page on a table still keeps the checked options. In the original component, there is no such function, so through the search and analysis, there is an example below, analysis to you.

Train of thought

After searching for information

To implement the reserved function, you need to store an array of checked items (selectedItems)
throughel-tableIn thetoggleRowSelectionMethod to set the selection status of rows.
throughel-tableIn theselectandselect-allGets checked or unchecked content

steps

Check the form

Form the radio

Because when you turn the page, when you click on selection it’s going to be undefined, so you’re going to have to do a little bit of a judgment here and you’re going to be able to tell whether you’re adding or subtracting by checking if there’s a row in selection selection

select (selection, row) {
  if (selection && selection.find(item= > item && (item.id == row.id))) {
    this.addRows([row])
  } else {
    this.deleteRows([row])
  }
}
Copy the code

Form selection

Check whether to select or deselect by selection array length

selectAll (selection) {
  if (selection.length > 0) {
    this.addRows(this.tableData)
  } else {
    this.deleteRows(this.tableData)
  }
},
Copy the code

Edit check array

Add the selected

Check if there is current row data in selectedItems when adding, and return if there is

addRows (rows) {
  rows.forEach(row => {
    if (this.selectedItems.find(item => item.id == row.id)) { return }
    this.selectedItems.push(row)
  });
},
Copy the code

uncheck

Return when selectedItems is an empty array

deleteRows (rows) {
  if (this.selectedItems.length == 0) { return }
  rows.forEach(row= > {
    this.selectedItems = this.selectedItems.filter(item= > item.id == row.id)
  })
}
Copy the code

Setting the selected state

This.$nextTick is used to ensure that the table rendering is complete before adding the selected effect. SelectedItem is a loop that filters whether the current row row is in the current table tableData data.

rows.forEach(row= > {
 this.$nextTick(() = > {
    let selectedItem = this.tableData.find(item= > item.id == row.id)
    this.$refs.multipleTable.toggleRowSelection(selectedItem);
  });
})
Copy the code

The complete code

<template>
  <div>
    <el-table ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              :key="randomKey"
              style="width: 100%"
              @select="select"
              @select-all="selectAll">
      <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="Name"
                       width="120">
      </el-table-column>
      <el-table-column prop="id"
                       label="ID"
                       show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next,slot"
                   :current-page="pages.index"
                   @current-change="handleCurrentChange"
                   :total="pages.count"
                   :page-size="pages.size">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [{date: '2016-05-03'.name: 'Wang Xiaohu'.id: '0' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '1' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '2' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '3' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '4' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '5' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '6' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '7' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '8' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '9' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '10' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '11' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '12' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '13' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '14' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '15' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '16' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '17' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '18' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: 'the' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '20' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '21' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '22' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '23' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '24' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '25' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '26' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '27' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '28' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: 'and' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '30' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: 'and' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '32' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '33' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '34' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '35' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '36' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '37' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: '38' },
        { date: '2016-05-03'.name: 'Wang Xiaohu'.id: 'and'},].tableData: [].selectedItems: [].pages: { size: 10.index: 1.count: 50 },
      randomKey: Math.random(),
    }
  },
  mounted () {
    this.pages.count = this.items.length || 0
    this.setTabelData()
  },
  methods: {
    // Set page data
    setTabelData () {
      let { index, size } = this.pages
      this.tableData = this.items.slice((index - 1) * size, (index - 1) * size + size)
      //randomKey is used to refresh the table when the table is changed
      this.randomKey = Math.random()
      this.selectedPreExisting(this.selectedItems)
    },
    // Listen for page turning
    handleCurrentChange (index) {
      this.pages.index = index
      this.setTabelData()
    },
    // Select existing data in table
    selectedPreExisting (rows) {
      if (rows.length > 0) {
        // This.$nextTick is used here to prevent the table from being executed before rendering is complete, so that the selected effect cannot be added
        this.$nextTick(() = > {
          rows.forEach(row= > {
            // Determine whether row exists in the current tableData
            let selectedItem = this.tableData.find(item= > item.id == row.id)
            this.$refs.multipleTable.toggleRowSelection(selectedItem); }); })}else {
        this.$refs.multipleTable.clearSelection(); }},// Table single
    select (selection, row) {
      // Select undefined after the page is turned
      // Add or subtract a row from the selection selection
      if (selection && selection.find(item= > item && (item.id == row.id))) {
        this.addRows([row])
      } else {
        this.deleteRows([row])
      }
    },
    // Select all forms
    selectAll (selection) {
      // Check whether to select or cancel
      if (selection.length > 0) {
        this.addRows(this.tableData)
      } else {
        this.deleteRows(this.tableData)
      }
    },
    // Add the check
    addRows (rows) {
      rows.forEach(row= > {
        // Filter, when selectedItems have this item of data, return directly, do not add
        if (this.selectedItems.find(item= > item.id == row.id)) { return }
        this.selectedItems.push(row)
      });
    },
    // Deselect
    deleteRows (rows) {
      // Delete is not performed when selectedItems are an empty array
      if (this.selectedItems.length == 0) { return }
      rows.forEach(row= > {
        this.selectedItems = this.selectedItems.filter(item= > item.id == row.id)
      })
    }
  }
}
</script>
Copy the code

El-table Keeps the selected items after the page is turned