El componente personalizado de Vue3 encuentra una solución incorrecta para los datos de transmisión de paginación

Elemento Vue3
Plus

Problemas de encuentro

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

        En ausencia de paginación, no hay problema con el rendimiento de los componentes personalizados, pero cuando ocurre la paginación, el problema saldrá. Por supuesto, si no tiene cuidado, no es fácil averiguarlo, porque los datos que muestra tableData también es correcto, entonces el problema es ¿dónde? Aparece en el lugar donde se pasan los parámetros a los componentes personalizados.

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

        Suponga que hay 21 piezas de datos en total, 10 piezas por página, la identificación de la primera página es 1-10 de arriba a abajo, la identificación de la segunda página es 11-20 de arriba a abajo y la identificación de la la tercera página es 21.
        De manera predeterminada, se mostrarán los datos con id 1-10, haga clic en la segunda página y los datos mostrados serán 11-20 datos, lo cual no es problema, pero cuando hace clic en editar, hay un problema con la id transmitida , por ejemplo, desde la primera página En la segunda página, cuando hace clic para editar los datos 11, encontrará que la identificación transmitida no es 11 sino 1.

causa

        Debido a que la primera página tiene diez datos y la segunda página también tiene diez datos, cuando se carga por primera vez, es decir, la primera página, se representará de acuerdo con la cantidad de datos.

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

        En este momento, habrá 10 componentes my-button, pero en la segunda página, debido a que también hay 10 piezas de datos y el mismo componente my-button, al renderizar, pensará que este es el mismo contenido y no se vuelve a renderizar, por lo que se producirá la situación anterior.
Para verificar aún más la conjetura, haga clic en la tercera página, porque solo hay un dato en la tercera página, por lo que los otros 9 botones my se destruirán, pero la transmisión de id en este momento sigue siendo 1, porque el my-button del primer dato se conserva, pero ¿qué pasa si vuelves a la segunda página? Excepto por el primer dato, se volverá a crear el botón my de los otros 9 datos, y los ID en este momento son todos correctos, 12-20.

Solución

        Por las razones anteriores, se entiende aproximadamente que, dado que no se puede juzgar la singularidad de los componentes, se puede reutilizar si se puede reutilizar.Si a cada componente se le puede dar un identificador único, ¿se resolverá el problema? Revisé las propiedades de el-table nuevamente y encontré la clave de fila.La introducción es más o menos la siguiente

Clave de datos de fila, utilizada para optimizar la representación de la tabla

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

Precauciones

        Cuando utilice la clave de fila, asegúrese de que el valor proporcionado sea único; de lo contrario, seguirán produciéndose problemas.