关于element-plus:elementplus-eltable-动态设置列显示隐藏

import {ref, Ref, onMounted, nextTick, unref} from 'vue';
import _ from 'lodash';
import * as DbCacheUtils from '@/utils/DbCacheUtils';
import type {TableColumnCtx} from 'element-plus/es/components/table/src/table-column/defaults';

import {setup as useRx} from './RxBusMixins';

interface MyProps {
  table: Ref<any>;
  /** 是否主动加载配置 */
  auto?: boolean;
  cacheKey?: string;
}

interface MyOption {
  label: string;
  prop: string;
  is_check: boolean;
}

interface TableStore {commit(name: string, ...args);
  states: {_columns: Ref<TableColumnCtx<any>[]>;
  };
  updateColumns();}

function SaveData(key: string, options: MyOption[]) {return DbCacheUtils.SetValue(key, JSON.stringify(options));
}

async function GetData(key: string): Promise<MyOption[]> {const json = await DbCacheUtils.GetValue<string>(key);
  if (!json) return null;
  return JSON.parse(json);
}

/**
 * @param props 
 * @returns 
 */
export function useTableColumns<T = any>(props: MyProps) {const options = ref<MyOption[]>([]);

  const rxHub = useRx();

  function GetCacheKey() {return props.cacheKey || 'table';}

  let storeColumns: TableColumnCtx<T>[];

  /**
   * 依据配置初始化列
   */
  async function InitShowColumns() {
    const table = props.table.value;
    const store: TableStore = table.store;
    const array = unref(store.states._columns);
    storeColumns = _.clone(array);

    const list = await GetData(GetCacheKey());

    if (list != null && list.length > 0) {
      options.value = list;
      InitConfig();}
    else {const array = unref(store.states._columns);

      options.value = array.filter(t => t.property != null).map(t => ({
        prop: t.property,
        label: t.label,
        is_check: true,
      }));
    }
    
    // console.log('table store', table.store);
  }

  onMounted(async () => {await nextTick();
    if (props.auto !== false) {InitShowColumns();
    }
  });

  /**
   * 弹出列设置
   */
  function ShowColumnsConfig() {
    rxHub.emit('ShowTableColumnDialog', {
      options: options.value,
      callback: async (list) => {
        options.value = list;
        InitConfig();}
    });
  }

  async function InitConfig() {
    const table = props.table.value;
    const store: TableStore = table.store;
    const array = unref(store.states._columns);

    options.value.forEach(option => {if (option.is_check === false) {const col = array.find(t => t.property === option.prop);
        if (col != null) {store.commit('removeColumn', col, null);
        }
      }
      else {const col = storeColumns.find(t => t.property === option.prop);

        if (!array.some(t => t.property === option.prop)) {store.commit('insertColumn', col, null);
        }
      }
    });

    await nextTick();
    store.updateColumns();
    await SaveData(GetCacheKey(), options.value);
  }

  return {
    InitShowColumns,
    ShowColumnsConfig,
  };
}