如何在vue中使用指令删除elementUI中的el-table-column？

Vue.directive('remove-column', {
  bind: function (el, binding, vnode) {
    // 在绑定时执行一些操作
  },
  inserted: function (el, binding, vnode) {
    // 在被绑定元素插入父节点时执行一些操作
  },
  update: function (el, binding, vnode, oldVnode) {
    // 在组件的 VNode 更新时执行一些操作
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
    // 在组件的 VNode 及其子 VNode 全部更新后调用
    if (binding.value) {
      // 判断传入的值是否为真，如果为真则执行删除操作
      const columnId = binding.value;
      const parentTable = el.closest('el-table');
      const columnToRemove = parentTable.$children.find(child => child.prop === columnId);

      if (columnToRemove) {
        const index = parentTable.$children.indexOf(columnToRemove);
        parentTable.$children.splice(index, 1); // 删除对应的el-table-column
        parentTable.columns.splice(index, 1); // 更新columns属性，确保表格显示正确
      }
    }
  },
  unbind: function (el, binding, vnode) {
    // 在解绑时执行一些操作
  }
});

import Vue from 'vue';

// 在需要的组件中引入指令
Vue.directive('remove-column', {
  // 自定义指令的具体实现
});

export default {
  // 组件的其他配置项
}

<el-table>
  <el-table-column prop="id"></el-table-column>
  <el-table-column prop="name"></el-table-column>
  <el-table-column prop="age" v-remove-column="'age'"></el-table-column>
</el-table>