preface

When use Element UI multiple-choice form, met a paging data save selection problem, apply directly to the official method is easy to realize, but after another page, find the is always an error for a long time, until I put the success page data of functionality and compares the current page data, is to find the problem, Here for the record, the mentality is a bit broken…

Function implementation

Using the ElementUItable multi-choice table, copy and paste the code directly to generate the following table:

Then change the data and table into your own data and display content:

Paging save data

When selecting data, it is easy to have multiple selection pages, which requires saving the selected data on the previous page when clicking on the next page. The official method can be used to achieve this:

The code implementation is as follows:

  1. Add the following code to the table:
<el-table
            height="450"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange" // Multiple options
            :row-key=" (row) => { return row.id; // Save the selected data id, which is the id of each data returned by the back end}"
          >
Copy the code
  1. Add the following code to the checkbox code:
<el-table-column
              :reserve-selection="true" // Enable paging echo
              type="selection"
              width="55"
            >
            </el-table-column>
Copy the code

When the realizable point goes back to the previous page, the selected data is still hot reserved

Have a problem

After using the official method to implement this feature, I tried the same method on another page, but failed to implement it and reported the following error:

At first, I thought it was a formatting problem. After all, the two ids returned by the back end have different data types. The back end returns the following data:

  1. Successful implementation of the function

  1. Failed to implement the function

Then I wondered if it was because the id type was different, so IT didn’t work. Then I converted the id type, but it still didn’t work. Again, the row-key issue

To solve

Originally I was going to not use other methods, but I thought of their other functions have been written, in the try, and then the realization of successful data and failed data are taken a few static data, by comparing them two to find the problem, the most comparison results are as follows:

It was obvious that it was not the PROBLEM of ID, and then we started to delete fields one by one for comparison. When deleting the children field, we found that no error was reported and it could be implemented normally, that is to say, the children field affected the implementation of this function, so what we need to do is to remove the children field returned by the backend

The processing is as follows:

This works fine after removing the Children field