element的el-table的列显示隐藏导致表格列显示错位

问题

使用element的el-table，需要在同一个表格的基础上，根据下拉操作显示隐藏部分表格列
初始状态显示无误，但是一旦操作列的显示隐藏之后就会导致列显示错位或者列显示不全

初始状态：

列显示隐藏之后：

原本应该自己显示一列，却跑到别人头上去了

感觉是表格没有重新渲染导致的

原先的代码：
获取列的方法：

getNewColumns() {
    let curData = [];
    let originColumn = this.columns;
    originColumn.forEach((col) => {
        if (!col.hasOwnProperty('isShow') || col.isShow) {
            curData.push(col);
        }
    });
    this.newColumns = curData;
    // 如果没有reloadTable，假如有列显示隐藏变化，会导致列显示错位
    this.reloadTable();
},

监听列，一旦变化就执行获取最新的列的信息

watch: {
    columns: {
        handler: function () {
            this.getNewColumns();
        },
        deep: true,
    },
},

在这基础上，尝试了reloadTable()，使用v-if对表格进行销毁重新渲染

<template>
    <div class="common-table">
        <el-table :data="tableData" height="100%" :border="border" v-if="reFreshTable">
        </el-table>
     </div>
</template>

在列变化之后，reloadTable()

reloadTable() {
    this.reFreshTable = false;
    this.$nextTick(() => {
        this.reFreshTable = true;
    });
},

可以正常显示