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

原文:点击这里

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » element-plus中el-table组件 动态设置列显示隐藏

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们