Element paging data selection table + select all perfect batch operations

Background management system list page, usually have a list of functions to perform bulk data operations, such as: bulk delete, batch delete.

Before the project simply use the Element framework of conventional properties, events. In a lucky coincidence, I learned that a company's internal framework is based on the internal Element framework implements some plug-in function, for which a complete table a lot of features, did not get the chance to see the source code is how to achieve, now a little regret it, it does not matter ~ ~ ~ ~ trained, trained, trained, he slowly realized little by little.

Function can be achieved:

• Paging data selection 
• Select all the data (not the element frame comes with Select Page oh!)

1, paged data select
       a start page that is not when the time selected before the data is stored in a list inside the thing, and then select the map a bit. Until the time to write their own code, you will find not so simple, after Baidu, found two properties are ignored

•  row-key
•  reserve-selection

Code Screenshot:

Event code:

getRowKeys (row) {
  return row.execId
}复制代码

So by selectionChange can get to change the selected data page method to save selected data to the list in

selectionChange (rows) {
  this.checkList = rows
}复制代码

2. Select all the data

element framework has select-all event, Select all the data on this page, but projects often encounter say to all operate, such as bulk delete (erase all data, this privilege bit big)

Realization of ideas:

• A select all checkbox, when checked, the front pass a parameter Flag: 1 to the background, the background will know that it is operating on all the data, but do not have an enormous amount of data transmission between the front and back 

<el-checkbox v-model="allCheck" @change="allCheckEvent">全选所有</el-checkbox>复制代码

• Select the check box to select all, all the current page of data to be checked, flip to another page, the data on this page are also all selected (monitor data for the current page)

allCheckEvent () {
  if (this.allCheck) {
    this.testList.forEach(row => {
      this.$refs.recordTable.toggleRowSelection(row, true)
    })
  } else {
    this.$refs.recordTable.clearSelection()
  }
}复制代码

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
  }
}复制代码

• Select the Select all check boxes, meanwhile, has a two page, select the data are two data, which canceled if selected line of data, at this time, select all cancel the currently selected data should be: have flip two data - data that line canceled

selectOne () {
  if (this.allCheck) {
    this.allCheck = false
  }
}复制代码

Realization of forms:

Quite a few detours noticed the problem:

• If the election turn from the first page to the second page, and then back to the first page, select the data of the data is supposed to be 1 + 2 two, the reality is 1 + 2 + 1 three data, in the form of a show I do not see the problem, but said earlier, select all, I pass parameters to the background just a flag, instead of the selected data. But if canceled in the first row of data page, then select all of the data frame has been canceled, the article data is not checked, turn to the second page, the second page in the back, Duang ~ piece of data back to the selected state ! Because the selected data of the record is two ah, you cancel one another still Yeah, of course you cancel once again, come back, is to abolish the state, bug, bug, bug!
• The data is going to re-think, the first thought is to go heavy from the results, in selectionChange approach to weight, tragedy, does not work, after clarifying ideas found: When the selection changes, call the method to get checked selectionChange All data at this time we use forEach through the data, the method by toggleRowSelection data page is selected, then once executed once selectionChange method toggleRowSelection
• Then when the monitored data, if the data ID is the same, the method does not perform toggleRowSelection

Final say: When you are tired, unhappy, RM to see it, you will find that in the world there are so many wonderful group of people, the smile and laugh, hard life!

Reproduced in: https: //juejin.im/post/5cf8af9a51882556174ddccc