[Frontal] vue3+ts+vite, duplicación de registros de representación de tabla el-table

Fíjate una meta y mantenla durante un tiempo, ¡y siempre obtendrás algo y obtendrás conocimientos!
En el proceso de uso de vue, siempre encontrará algunos puntos dudosos. Un resumen puede profundizar su impresión y proporcionar una referencia la próxima vez.

1. Atributos comunes

El componente Element UI el-table es un potente componente de tabla que proporciona muchas propiedades comunes para configurar y personalizar la apariencia y el comportamiento de la tabla.

[La siguiente es una introducción a algunos el-table atributos comunes]

data: La fuente de datos de la tabla, que puede ser una matriz o una función que acepta Promise.
columns: define la configuración de columnas de la tabla, cada configuración de columna utiliza el componente el-table-column.
border: ya sea para mostrar el borde de la tabla, el valor opcional es true o false.
stripe: ya sea para mostrar el patrón de cebra, el valor opcional es true o false.
show-header: ya sea para mostrar el encabezado de la tabla, el valor opcional es true o false.
highlight-current-row: Ya sea para resaltar la línea actual, el valor opcional es true o false.
row-key: Especifica un identificador único para la fila, utilizado para optimizar la representación y realizar un seguimiento de los cambios.
size: El tamaño de la tabla, los valores opcionales son medium (valor predeterminado), small o mini.
height: la altura de la tabla, que puede ser un valor fijo (como "300px"
max-height: La altura máxima de la tabla. Las barras de desplazamiento se mostrarán más allá de la altura.
index: ya sea para mostrar la columna de índice, el valor opcional es true o false.
fit: si el ancho se adapta al elemento principal, el valor opcional es true o false.
show-summary: si se muestra la fila de resumen al final de la tabla, el valor opcional es true o false.
sum-text: El texto de la línea de resumen, utilizado para personalizar la copia para mostrar de la línea de resumen.

A continuación se muestran algunas propiedades comunes. Si desea conocer más propiedades y configuraciones, consulte la documentación oficial de Element UI.

¡Espero que esta información pueda ayudarte! Si tiene más preguntas, no dude en preguntar.

2. Razones de la duplicación

Generalmente hay dos razones
1) La primera es que los registros de la fuente de datos están duplicados
2) La segunda es que la fuente de datos 10 Se devuelven artículos, 2 de los cuales tienen números de identificación duplicados e identificadores únicos
. La solución es encontrar una manera de garantizar que los identificadores de identificación sean únicos.
Esto supone que cada elemento de la fuente de datos tiene un atributo de identificación único. Puede reemplazar row.id con el nombre de campo de su identificador único según su situación real.

Por ejemplo:

<el-table :data="tableData" :row-key="row => row.id">
  <!-- 表格列配置 -->
</el-table>

3. Uso avanzado

El componente Element UI el-table proporciona muchos usos avanzados que pueden ayudarle a personalizar y utilizar tablas de forma más flexible.

[Los siguientes son algunos usos avanzados comunes]

3.1 Plantilla de columna personalizada

El contenido y el estilo de la columna se pueden personalizar a través de los atributos de el-table-column. Se pueden implementar plantillas de columnas más complejas utilizando ranuras de ámbito para acceder a los datos de la fila actual. slot-scope

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名">
    <template slot-scope="scope">
      <span style="color: { 
        { 
        scope.row.color}}">{
   
   { scope.row.name }}</span>
    </template>
  </el-table-column>
</el-table>

3.2 Personalizar el estilo del encabezado

A través del atributo scopedSlots, puedes personalizar el estilo y el contenido del encabezado. Las ranuras de alcance se pueden utilizar para acceder a los datos del encabezado para implementar plantillas de encabezado personalizadas.

<el-table :data="tableData" row-class-name="highlight-row">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="deleteRow(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>

3.3 Personalizar estilos de fila y columnas de operación

A través del atributo row-class-name, puede generar un nombre de clase CSS personalizado para la fila para implementar un estilo de fila personalizado. Al mismo tiempo, puede definir columnas de operación en la configuración de columnas y agregar botones o funciones de operación personalizados a cada fila.

3.4 Paginación y clasificación

La función de paginación se puede configurar para la tabla a través del atributo pagination. Configurar las propiedades sort-by y sort-orders permite ordenar la tabla.

<el-table :data="tableData" :pagination="true">
<el-table-column prop="name" label="姓名" sortable></el-table-column>
<el-table-column prop="age" label="年龄" sortable></el-table-column>
<el-table-column prop="gender" label="性别" sortable></el-table-column>
</el-table>

3.5 Fusión de tablas

A través del atributo span-method, puede personalizar la estrategia de combinación de celdas para lograr la combinación de celdas de la tabla.

<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="department" label="部门" :span-method="spanMethod"></el-table-column>
</el-table>

spanMethod({
     
      row, column, rowIndex, columnIndex }) {
    
    
if (columnIndex === 2) {
    
    
if (row.department === 'HR') {
    
    
return {
    
    
rowspan: 2,
colspan: 1
};
}
if (row.department === 'Finance') {
    
    
return {
    
    
rowspan: 0,
colspan: 0
};
}
}
}

3.6 Personalizar mensajes de datos vacíos

Con el atributo empty-text, puede configurar el texto de solicitud personalizado que se muestra cuando los datos de la tabla están vacíos.

3.7 Estado de carga personalizado

Puede especificar el estado de carga de la tabla a través del atributo loading y puede utilizar el atributo loading-text para configurar el mensaje de texto durante la carga.

Los anteriores son algunos ejemplos comunes de uso avanzado. El componente el-table de Element UI también proporciona funciones y propiedades más potentes que se pueden personalizar según las necesidades específicas.