The Vue custom component encounters an incorrect solution for paging transmission data

test environment

Vue3
Element Plus

Encounter problems

   <el-table
      :data="tableData"
    >
    ...其他el-table-column
    <template #default="scope">
        // 自定义组件
        <my-button name="编辑" :id="scope.row.id"/ >
      </template>
    </el-table>
    <el-pagination
     :page-size="10"
      layout="prev, pager, next"
      @current-change="currentChange"
     :total="21">
</el-pagination>

In the absence of paging, there is no problem with the performance of custom components, but when paging occurs, the problem will come out. Of course, if you are not careful, it is not easy to find out, because the data displayed by tableData is also correct, so the problem is where? Appears in the place where parameters are passed to custom components

<my-button name="编辑" :id="scope.row.id"/ >

Suppose there are 21 pieces of data in total, and 10 pieces are divided into pages. The id of the first page is 1-10 from top to bottom, the id of the second page is 11-20 from top to bottom, and the id of the third page is 21.
By default, the data with id 1-10 will be displayed, click on the second page, and the displayed data will be 11-20 data, which is no problem, but when you click edit, there is a problem with the transmitted id, for example, from the first page On the second page, when you click to edit data 11, you will find that the transmitted id is not 11 but 1.

cause

Because the first page has ten pieces of data, and the second page also has ten pieces of data, when it is loaded for the first time, that is, the first page, it will be rendered according to the number of pieces

<my-button name="编辑" :id="scope.row.id"/ >

At this time, there will be 10 my-button components, but on the second page, because there are also 10 pieces of data and the same my-button component, when rendering, it will think that this is the same content, and will not re-render, so The above situation will occur.
In order to further verify the conjecture, click to the third page, because there is only one piece of data on the third page, so the other 9 my-buttons will be destroyed, but the id transmission at this time is still 1, because the my-button of the first piece of data It is preserved, but what happens if you return to the second page? Except for the first piece of data, the my-button of the other 9 pieces of data will be recreated, and the ids at this time are all correct ids, 12-20.

Solution

From the above reasons, it is roughly understood that since the uniqueness of components cannot be judged, it can be reused if it can be reused. If each component can be given a unique identifier, will the problem be solved? I looked through the properties of el-table again and found row-key. The introduction is roughly as follows

Key of row data, used to optimize the rendering of Table

   <el-table
      :data="tableData"
      row-key="id"
    >
    </el-table>

Tried the effect, it really solved the problem

Precautions

When using row-key, make sure that the value provided is unique, otherwise problems will still occur.