当前位置: 首页 > Web前端 > HTML

element-plusel-table动态设置列显示隐藏

时间:2023-03-28 11:03:13 HTML

import{ref,Ref,onMounted,nextTick,unref}from'vue';import_from'lodash';import*asDbCacheUtilsfrom'@/utils/DbCacheUtils';importtype{TableColumnCtx}from'element-plus/es/components/table/src/table-column/defaults';import{setupasuseRx}from'./RxBusMixins';interfaceMyProps{table:Ref;/**是不是自动加载配置*/auto?:boolean;cacheKey?:string;}interfaceMyOption{label:string;道具:字符串;is_check:boolean;}interfaceTableStore{commit(name:string,...args);状态:{_columns:Ref[]>;};updateColumns();}functionSaveData(key:string,options:MyOption[]){returnDbCacheUtils.SetValue(key,JSON.stringify(options));}异步函数GetData(key:string):Promise{constjson=awaitDbCacheUtils.GetValue(key);如果(!json)返回null;returnJSON.parse(json);}/***@paramprops*@returns*/export函数useTableColumns([]);constrxHub=useRx();函数GetCacheKey(){返回props.cacheKey||'桌子';}让storeColumns:TableColumnCtx[];/***根据配置初始化列*/asyncfunctionInitShowColumns(){consttable=props.table.value;常量存储:TableStore=table.store;constarray=unref(store.states._columns);storeColumns=_.clone(数组);constlist=awaitGetData(GetCacheKey());constsoureList=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=>{constitem=list.find(t=>t.prop===col.prop);if(item!=null){col.is_check=item.is_check;}});options.value=sourceList;InitConfig();}else{options.value=soureList;}}onMounted(async()=>{awaitnextTick();if(props.auto!==false){InitShowColumns();}});/***弹出列表设置*/functionShowColumnsConfig(){rxHub.emit('ShowTableColumnDialog',{options:options.value,callback:async(list)=>{options.value=list;InitConfig();}});}asyncfunctionInitConfig(){consttable=props.table.value;常量存储:TableStore=table.store;constarray=unref(store.states._columns);options.value.forEach(option=>{if(option.is_check===false){constcol=array.find(t=>t.property===option.prop);if(col!=null){store.commit('removeColumn',col,null);}}else{constcol=storeColumns.find(t=>t.property===option.prop);if(!array.some(t=>t.property===option.prop)){store.commit('insertColumn',列,空);}}});等待nextTick();store.updateColumns();等待SaveData(GetCacheKey(),options.value);}return{InitShowColumns,ShowColumnsConfig,};}

最新推荐
猜你喜欢