element-plus el-table 動態設定列顯示隱藏

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());

    const soureList = storeColumns
      .filter(t => t.property != null)
      .map(t => ({
        prop: t.property,
        label: t.label,
        is_check: true,
      }));

    if (list != null && list.length > 0) {
      // 這裡需要對比2個陣列 因為前端的列可能被修改過
      soureList.forEach(col => {
        const item = list.find(t => t.prop === col.prop);
        if (item != null) {
          col.is_check = item.is_check;
        }
      });
      options.value = soureList;
      InitConfig();
    }
    else {
      options.value = soureList;
    }
  }

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