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

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

原文：点击这里

以上关于element-plus中el-table组件 动态设置列显示隐藏的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。