The list page in the background management system generally supports batch operations on list data, such as batch deletion and batch deletion.

The previous project simply used the regular attributes and events in the Element framework. Under a coincidence, learned that a company is based on the framework of internal Element within the framework of the function of some plug-in, to form a piece of perfecting the function of many, at that time did not seize the opportunity to see the source code is how, now is a little small regret, breaks down melody ~ ~ ~ ~ it doesn’t matter, oneself slowly bit by bit.





  • Paging data selection
  • Select all the data (not the element framework’s own select this page!)


  •  row-key
  •  reserve-selection

Code screenshot:



Event code:

getRowKeys (row) {
  return row.execId
}Copy the code

The selectionChange method captures the changes to the selected data on the page and stores the selected data in the list

selectionChange (rows) {
  this.checkList = rows
}Copy the code

2. Select all data

The element framework has a select-all event, which selects all the data in the page.


Implementation idea:

  • A select all check boxes, when elected, the front end passes a parameter Flag:1 to the background, the background will know that this is the operation of all data, at the same time there is no huge data transmission between the front and background

<el-checkbox v-model="allCheck" @change="allCheckEvent"</el-checkbox>Copy the code

  • Select all Select all check boxes, all data on the current page must be selected, turn to another page, all data on this page is also selected (listen to data on the current page)

allCheckEvent () {
  if (this.allCheck) {
    this.testList.forEach(row => {
      this.$refs.recordTable.toggleRowSelection(row, true)})}else {
    this.$refs.recordTable.clearSelection()
  }
}Copy the code

watch: {
  testList: {
    handler (value) {
      if (this.allCheck) {
        let that = this
        let len = that.checkList.length
        value.forEach(row => {
          for (let i = 0; i < len; i++) {
            if (row.execId === that.checkList[i].execId) {
              that.$refs.recordTable.toggleRowSelection(row, false)
              break
            } else {
              that.$refs.recordTable.toggleRowSelection(row, true)
            }
          }
        })
      }
    },
    deep: true}}Copy the code

  • If two pages have been turned, the selected data is two pages. If you deselect one row, deselect all. The current selected data is: Two pages turned – The deleted row

selectOne () {
  if (this.allCheck) {
    this.allCheck = false}}Copy the code

Table of implementation:



Problems that took a lot of detours to notice:

  • If you select from the first page to the second page, and then return to the first page, the selected data should be 1+2 pages of data, but the reality is that the three pages of data of 1+2+1 are not obvious in the form of presentation, and as mentioned above, when I select all, the parameters I pass to the background are only a flag, not the selected data. However, if you cancel a row of data on the first page, then all data boxes have been cancelled and this data is not selected, turn to the second page, and return to the second page, Duang~ that data is selected again! Because there are two items in the selected data, you cancel one, the other is still there, of course, you cancel again, and then come back, it’s cancelled, bug, bug, bug!
  • The first thing that comes to mind is that the data should be weighted from the results. In the selectionChange method, it is tragic and does not work at all. After sorting out my thoughts, I find: When the selection changes, the selectionChange method is called to get all the selected data. At this time, we use forEach to traverse the data and toggleRowSelection method to select the data in the page. At this time, toggleRowSelection once, The selectionChange method is executed once
  • So when you’re listening for data, if the data ids are the same, you don’t do toggleRowSelection