el-table新增列时，fixed部分抖动问题。

今天制作表格新增列时，发现表头在动态添加列时疯狂抖动。

在网上查了下，发现可以用element ui中自带的方法( doLayout )解决:

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

然而，我发现table中设定固定的列（fixed）仍然存在抖动问题。

方法1：在网上查了下，也是table重新计算导致的。可以通过写死cell高度解决问题。(不生效样式穿透下)

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

然而，这时你会发现问题虽然解决了，但是cell的高度被限制住了。所以说在部分情况下仍然不妥当。

方法2：经过研究发现是一个相应的标签top变化导致的。

可以对其进行更改：

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

然后问题解决了。

DLC补充：

上述的第二种方法会导致一个可能出现的问题，就是当表头的内容很长且没有任何限制，超出一行时。这里写死的top可能不合适。因此需要获取除设定fixed外的其他的表头height来决定top的值。

这里我想到了一个方法（后续有更好方法会有补充），就是css表达式动态获取并赋值。

1.首先先定义一个css表达式变量在root中，可以预设定一个默认值：

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

2.将该值赋到目标上：

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

3.定义一个方法来获取表头高度（这里笔者给el-table设定的类名为table1）并赋值给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.在可能触发表头高度变化的地方调用该方法。（如拉伸表头，可导致标题变更的方法，甚至有可能是mounted或监听中等）

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

然后，遇到触发表头高度变更的情况时，只要触发该方法就可以动态变化top值了。

希望本文会对你有所帮助 ^_^

el-table新增列时，fixed部分抖动问题。

DLC补充：

猜你喜欢