When el-table adds columns, the fixed part shakes.

When adding new columns to the table today, I found that the table header was shaking wildly when adding columns dynamically.

After checking on the Internet, I found that it can be solved by using the method ( doLayout ) that comes with element ui:

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

However, I found that the fixed column (fixed) in the table still has the problem of jitter.

Method 1: Checked on the Internet, it is also caused by table recalculation. The problem can be solved by writing dead cell height. (does not take effect under style penetration)

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

However, at this time you will find that although the problem is solved, the height of the cell is limited. So it's still inappropriate in some cases.

Method 2: After research, it is found that it is caused by a corresponding label top change.

It can be changed:

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

Then problem solved.

DLC added:

The above-mentioned second method will cause a possible problem, that is, when the content of the table header is very long and has no limit, it exceeds one line . The hard-coded top here may not be appropriate. Therefore, it is necessary to obtain other header heights other than fixed to determine the value of top.

Here I thought of a method (better methods will be added later), which is to dynamically obtain and assign CSS expressions.

1. First define a css expression variable in the root, you can preset a default value:

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

2. Assign the value to the target:

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

3. Define a method to get the height of the table header (here the class name I set for el-table is table1) and assign it to the css variable.

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. Call this method at a place that may trigger a change in the height of the meter header. (such as stretching the header, the method that can cause the title to change, it may even be mounted or listening, etc.)

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

Then, when encountering the situation of triggering the height change of the header, as long as this method is triggered, the top value can be dynamically changed.

I hope this article will help you ^_^