- 首页 > it技术 > >
element-plus|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;
/** 是否自动加载配置 */
auto?: boolean;
cacheKey?: string;
}interface MyOption {
label: string;
prop: string;
is_check: boolean;
}interface TableStore {
commit(name: string, ...args);
states: {
_columns: Ref;
};
updateColumns();
}function SaveData(key: string, options: MyOption[]) {
return DbCacheUtils.SetValue(key, JSON.stringify(options));
}async function GetData(key: string): Promise {
const json = await DbCacheUtils.GetValue(key);
if (!json) return null;
return JSON.parse(json);
}/**
* @param props
* @returns
*/
export function useTableColumns(props: MyProps) {
const options = ref([]);
const rxHub = useRx();
function GetCacheKey() {
return props.cacheKey || 'table';
}let storeColumns: TableColumnCtx[];
/**
* 根据配置初始化列
*/
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 = https://www.it610.com/article/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 = https://www.it610.com/article/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,
};
}
推荐阅读
