Due to the requirements of the product, we may use a table with a check box when we use the Element-UI table. However, the check box will not be saved when we use the paging switch to the next page, because the data on each page is directly obtained from the interface. Based on this situation, I wrote this post by sharing a way to remember our options on each page.

In addition, there is a second plan for this problem. I think the second plan is better. If you want to save time, you can directly move to the second plan

  1. CSDN portal
  2. The nuggets portal

1, cut in

Some students might say, “I can save the options on this page when I switch pages.”

Yes, this works, but if the number of pages is too large and we have options to change on each page, frequent requests to the interface will be a burden on the server, which clearly violates the idea of performance optimization.

And there’s another important reason, because the product says, “I don’t want to save every page, I want to save every page, and submit all the options that have been acted on.”

2, analysis,

We all know that the reason why the table selection state is not saved is because of data refresh and re-rendering. The refresh means that the interface data returns new data, and the rendering is based on the changed data. Knowing the problem, we began to formulate the implementation method.

3, plan

1, initialize a changList[] 2, process the list data returned by the interface, select the status to add to changList 3, render data, Judge the status of multi-check boxes according to the items in changList. 4. Add the changed items to changList when the status of multi-check boxes changesCopy the code

The map is as follows:

4, implementation,

The script code

// Define global variables
const changeList = []

data() {
  return {
    /** The component automatically handles the selected option */
    multipleSelection: [].}}Copy the code
// Calculate the changList using the calculate attribute
computed: {
  changeList() {
  const { multipleSelection } = this
	// Compare the selected data of the component with changList
  // If the changList does not exist, push it
  multipleSelection.map((item) = > {
    const { itemId } = item
    const exit = changeList.findIndex(item= > item.itemId === itemId) >= 0

    if(! exit) { changeList.push({ itemId,state: true})}})return changeList
  }
},
Copy the code
methods: {
	fetchList() {
    List */
    // Render the data
    this.$nextTick(() = > {
      this.list.forEach(item= > {
        const { itemId } = item
        const exit = changeList.findIndex(items= > items.itemId === itemId)
        if (exit >= 0) {
        	this.$refs.multipleTable.toggleRowSelection(item, changeList[exit].state)
        } else {
        	this.$refs.multipleTable.toggleRowSelection(item, item.state)
        }
      })
    })
  } 
}
Copy the code
methods: {
		// Copy the document here
		handleSelectionChange(val, index) {
      this.multipleSelection = val
    },
		// Line select the processing logic
    handleRowClick(val) {
      const { multipleSelection } = this
      const { itemId } = val
      const state = multipleSelection.findIndex(item= > item.itemId === itemId) >= 0

      this.checkChooseState(itemId)
      this.$refs.multipleTable.toggleRowSelection(val, ! state) },// Check the current row by clicking the checkbox directly
    // I disable the checkbox selection and click the checkbox to retrieve the current row
    checkSelectable() {
      return false
    },
		// The key here is to determine whether the changed option exists in the changList
		// If yes, change the status to false
		// There is no need to add it here, we have the calculation properties to handle it for us
    checkChooseState(id) {
      changeList.map((item) = > {
        const { itemId } = item
        if (id === itemId) {
          item.state = false}}}})Copy the code

The template code

<template>
	<el-table
    ref="multipleTable"
    :chang="changList"
    :data="list"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
	>
    <el-table-column
      type="selection"
      width="55"
      :selectable="checkSelectable"
    />
    <el-table-column
      prop="liveCompanyName"
      label="Company name"
    />
	</el-table>
</template>
Copy the code

Style code

<style lang="less" scoped> /deep/ to restore the style, add additional code to control the style.el-table--enable-row-transition .el-table__body td {
    cursor: pointer;
  }
  /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after{
    border-color: #fff;
  }
  /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
    background-color: #409eff;
  }
</style>
Copy the code

5, effects,

​ When you open the table for the first time, the length of the changList is 0->2, because there are two options Now we select the last item and the changList is 2->3 in length

Next we switch to the second page, which has seven default selections and a changList of 3->10 lengths

Now we add another option, and the changList is 11

Let’s go back to the first page and it’s still 11

So let’s add another one, so the changList is 12

We cancel one of the selected items, and now the changList is still 12 in length, but the flag of the cancelled item has changed to false

Finally, we pass the changList to the back end, which contains the defaults and changes to the user’s actions

6, summary

The original effect is to share through the form of video, but thinking of the data in the video code is too troublesome to change the picture, although very low, but also try to let everyone see the effect

end~~

In view of the author’s limited level, if there is any improper place welcome to point out oh

If you have any questions, please leave a message below. I will reply when I see it

If you can’t answer in time, you can also choose to join the front end should know should exchange group questions oh ~~

Group No. : 216644014(Front-end should know and should meet)