Cuando el-table añade columnas, la parte fija tiembla.

Al agregar nuevas columnas a la tabla hoy, descubrí que el encabezado de la tabla temblaba mucho al agregar columnas dinámicamente.

Después de consultar en Internet, descubrí que se puede resolver utilizando el método ( doLayout ) que viene con el elemento ui:

watch: {
        // 处理table抖动问题
        dataList: {
            handler(val) {
                this.$nextTick(() => {
                    if(this.$refs.table1) {
                        this.$refs.table1.doLayout();
                    }
                })
            },
            deep: true,
        },
    }

Sin embargo, descubrí que la columna fija (fixed) en la tabla todavía tiene el problema del jitter.

Método 1: verificado en Internet, también es causado por el recálculo de la tabla. El problema se puede resolver escribiendo la altura de la celda muerta. (no tiene efecto bajo la penetración del estilo)

.el-table .cell{
    height: 28px !important;
}

Sin embargo, en este momento encontrará que aunque el problema está resuelto, la altura de la celda es limitada. Así que sigue siendo inapropiado en algunos casos.

Método 2: Después de la investigación, se encuentra que es causado por un cambio en la parte superior de la etiqueta correspondiente.

Se puede cambiar:

::v-deep .el-table__fixed-body-wrapper {
    top: 40px !important;
}

Entonces problema resuelto.

Contenido descargable añadido:

El segundo método mencionado anteriormente causará un posible problema, es decir, cuando el contenido del encabezado de la tabla es muy largo y no tiene límite, excede una línea . La parte superior codificada aquí puede no ser apropiada. Por tanto, es necesario obtener otras alturas de cabecera distintas a las fijas para determinar el valor de top.

Aquí pensé en un método (más adelante se agregarán mejores métodos), que consiste en obtener y asignar expresiones CSS dinámicamente.

1. Primero defina una variable de expresión css en la raíz, puede preestablecer un valor predeterminado:

:root {
  --table-head-height: 40px;
}

2. Asigne el valor al objetivo:

 :deep(.el-table__fixed-body-wrapper) {
    /* top: 40px; */
    top: var(--table-head-height) !important;
 }

3. Defina un método para obtener la altura del encabezado de la tabla (aquí el nombre de clase que configuré para el-table es table1) y asígnelo a la variable css.

headerChanged() {
    window.setTimeout(() => {
        let aimDom = document.querySelector('.table1 .el-table__header')
        let aimHeight = window.getComputedStyle(aimDom).height
        document.documentElement.style.setProperty('--table-head-height', aimHeight);
    },100)
}

4. Llame a este método en un lugar que pueda desencadenar un cambio en la altura del encabezado del medidor. (como estirar el encabezado, el método que puede hacer que el título cambie, incluso puede estar montado o escuchando, etc.)

<el-table
    ref = 'table1'
    class= "table1"
    :data="MesTableData"
    border
    @header-dragend="headerChanged"
>

Luego, cuando se encuentre con la situación de activar el cambio de altura del encabezado, siempre que se active este método, el valor superior se puede cambiar dinámicamente.

Espero que este artículo te ayude ^_^