关于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,  };}