La representación de big data del componente de tabla en elementui tiene un grave problema de retraso en el rendimiento

El componente de tabla en elementui tendrá un serio retraso en el rendimiento al renderizar ante grandes cantidades de datos.También hay muchas soluciones en Internet, como carga retrasada, carga virtual, etc.Aquí, para evitar desvíos, vaya directamente a la gran solución definitiva:¡Cambie los componentes antes, cambie los componentes ahora, cambie los componentes ahora! ! !

Una biblioteca recomendada aquí que puede reemplazar el componente de tabla de elementUI es umy-ui

---

Acerca de Umy

El componente de tabla en la biblioteca umy-ui no hace ruedas. Transforma los componentes de la tabla de element-ui y otras bibliotecas. El método principal para resolver la representación de tablas de datos grandes es la tabla virtual

uso

Instalar:

npm install umy-ui

main.js (presentado en este artículo según la forma de todas las importaciones):

import UmyUi from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css';

Vue.use(UmyUi);

declaración de vue:

<u-table
        :header-cell-style="headerStyle" 
        :height="tableHeight"
        :row-height="rowHeight"
        @selection-change="selectionChange"
        use-virtual 
        ref="tableRef"
        :data="tableData">
        <u-table-column label=" " type="index" fixed="left"></u-table-column>
        <u-table-column
            type="selection"
            fixed="left"
            width="55">
        </u-table-column>
        <u-table-column
            prop="id"
            label="id"
            width="100"
        ></u-table-column>
        <u-table-column
            :label="操作"
            width="140"
            fixed="right"
        >
            <template slot-scope="scope">
              <span class="spanBtn" @click="view(scope.row)">查看</span>
            </template>
        </u-table-column>
</u-table>

data() {
    
    
    return {
    
    
      rowHeight: 60,
      tableHeight: window.innerHeight - 420,
      headerStyle: {
    
     // 表头样式
        backgroundColor: "#d9d9d9",
        fontSize: "14px",
        fontWeight: 900,
        color: "#333"
      },
      tableData: []
    }
}

punto importante:

• altura: Es la altura total de la mesa, si no se da altura o altura máxima, o se da 0, use-virtual se cerrará directamente
• use-virtual: es el núcleo de toda la tabla, agregar este atributo significa que iniciar la tabla virtual puede resolver el problema del retraso en la representación de datos.
• altura de la fila: si use-virtual no está habilitado, no es necesario. altura al azar, use td La altura de tr prevalecerá, de lo contrario, el cálculo de la tabla será incorrecto.la altura de la fila no es para establecer la altura de la fila de la tabla, es solo para calcular algo en la tabla. Si necesita cambiar la altura de su línea, ¡debe escribir css para cambiar la altura de td! )

La solución a la dislocación de la representación de tablas.

watch: {
    "tableData" (val) {
      this.$nextTick(() => {//修复表格错位
        this.$refs.tableRef && this.$refs.tableRef.doLayout()
      })
    }
  },