Vue3自定义组件遇到分页传输数据不正确解决办法

Vue3

Element Plus

遇到问题

   <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>

       在没有分页的情况，自定义组件的表现没有任何问题，但是当出现分页的时候，问题就出来了，当然如果不仔细的话，也不好发现，因为tableData展示的数据也是正确的，那么问题在哪？出现在往自定义组件传参的地方

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

       假设一共21条数据，10条一分页，第一页的id自上到下为1-10，第二页自上到下为11-20，第三页为21。

       默认会展示id为1-10的数据，点击第二页，展示的数据为11-20的数据，这点没问题，但是点击编辑的时候，传输的id就有问题了，例如从第一页到第二页，点击编辑数据11的时候，你会发现，传输的id不是11而是1。

产生原因

       因为第一页是十条数据，第二页也是十条数据，在首次加载的时候，也就是第一页，会根据条数渲染

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

       此时会出现10个my-button组件，但是第二页的时候，因为同样是10条数据，同样是my-button组件，渲染的时候会认为这是相同的内容，不再进行重新渲染，所以就会出现上述情况。

为了进一步验证猜想，点击到第三页，因为第三页只有一条数据，所以其他的9个my-button将被销毁，但是此时的id传输的还是1，因为第一条数据的my-button被保留下来了，但是如果再返回第二页又是什么情况？除了第一条数据之外，其他9条数据的my-button将被重新创建，而此时的id都是正确的id，12-20。

解决办法

       从上述原因大概明白了，由于不能判断组件的唯一性，所以能复用就复用，如果能够给每个组件一个唯一标识，问题是不是就能解决了？又翻看了el-table的属性，找到了row-key，介绍大概如下

行数据的 Key，用来优化 Table 的渲染

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

注意事项

       使用row-key的时候确保提供的值唯一，否则仍会出现问题。