element-ui框架 el-table组件如何能通过store.updateColumns方法更新表头列重绘显示？

Question

element-ui框架 el-table组件如何能通过store.updateColumns更新表头列重绘显示，实现可配置切换显示不同列的效果

目前有一个已实现的案例，是将el-table源码复制到本地在页面中引用，通过$refs指向table实例调用其store.updateColumns()方法就能有效果，类似以下两种情况当前组件或层级嵌套组件都能触发：
this.$refs.commonTable.$refs.multipleTable.store.updateColumns(['field1']);
this.$refs.multipleTable.store.updateColumns(['field1']);

但是我自己尝试在页面中直接引用npm依赖中的el-table再调用updateColumns始终无法实现效果，单纯是静态demo，已排除异步和dom渲染更新等干扰因素，如下所示：

<el-table ref="commonTable">
  <el-table-column align="center" label='字段1' prop="field1" />
  <el-table-column align="center" label='字段2' prop="field2" />
  <el-table-column align="center" label='字段3' prop="field3" />
</el-table>

mounted() {
  this.$nextTick(() => {
    this.$refs.commonTable.store.updateColumns(['field1']);
  })
},

$refs指向在控制台都能正常获取打印出来，.store.updateColumns方法也是存在的，但就是没效果，换成源码table本地引用就好使，实在不明白为什么，难道就是因为引用方式的差异所导致吗？

Answer 1

可以这样处理：

store/config.js

const state = {
    tableHeader:  [] // 表头字段
};

const mutations = {
    SET_TABLE_HEADER(state, value) {
        state.tableHeader = value;
    }
};

const actions = {};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
};

组件

import { mapState } from 'vuex';


computed: {
    ...mapState({
        tableHeader: (state) => state.config.tableHeader,
    }),
}

this.$store.commit('config/SET_TABLE_HEADER', ['需要配置的表头'])


<el-table ref="commonTable">
  <el-table-column
        v-for="(filed, index) in tableHeader"
        :key="index"
        align="center"
        label='字段1'
        :prop="filed"
    />
</el-table>

Answer 2

mounted() {
  this.$nextTick(() => {
    setTimeout(() => {  
      const columns = this.$refs.commonTable.store.states.columns.filter(col => 
        col.property === 'field1'
      );
      this.$refs.commonTable.store.states.columns = columns;
      this.$refs.commonTable.doLayout();
    }, 0);
  });
}