vue动态改变el-table表格列

方法1templatedivclassmainBoxdivclassoptshowBoxel-popoverplacementbottomtrigger-clickwidth200popper-classpopperStyletemplate#referenceptitle表头配置el-iconisize20Setting//el-icon/p/templatedivel-checkbox-groupv-modelcheckedHeadersel-checkboxv-foritem in state.options:keyitem.prop:label-item.prop{{item.label}}/el-checkbox/el-checkbox-group/div/el-popoverel-popoverplacementrighttriggerhoverwidth260popper-classpopperstyle/el-popover/divdivclasstableBoxel-table:datastate.tableDatav-loadingstate.searchLoadingidexportTab”stylewidth:100%” height100%borderhighlight-current-rowrefyjRefel-table-columnlabel序号width45!--分页连续序号--template#default{$index}{{ (state.pageNum -1) * state.pagesize $index 1 }}/template/el-table-columnel-table-columnv-for(item, index) in filterHeaders:keyindex:propitem.prop:labelitem.label:widthitem.width/el-table-column/el-table/div/div/templatescriptsetupimport{onMounted,reactive,ref,watch,computed}fromvueconststatereactive({pageSize:10,pageNum:1,options:[{prop:title,label:标题},{prop:readPercentage,label:读取进度},{prop:analysePercentage,label:解析进度},{prop:savePercentage,label:保存进度},{prop:executeTime,label:执行时间},{prop:finishTime,label:完成时间},{prop:status,label:状态},{prop:code,label:接口结果},],})//表头默认需要隐藏的多个字段consthidelist[savePercentage,executeTime,finishTime,]constcheckedHeadersref(state.options.filter(item!hideList.includes(item.prop)).map(elel.prop))// 表头默认需要隐藏的单个字段// const checkedHeaders ref(state.options.filter(itemitem.prop !bj).map(elel.prop)) //默认标记不展示watch(checkedHeaders,(newval){localstorage.setItem(tale-header,JSON.stringify(newval))},{deep:true})constfilterHeaderscomputed((){returnstate.options.filter(elcheckedHeaders.value.includes(el.prop))})/script方法2templatedivclassconterel-table:datatableDatastripeborderstylewidth:98%reftableDataRef!-- el-table-column typeselection width55 aligncenter/el-table-column --el-table-columntypeindexwidth55label序号aligncenter/el-table-columnel-table-columnv-ifcolData[0].istruepropnamelabel名称aligncenter/el-table-columnel-table-columnv-ifcolData[1].istruepropselectlabel性别aligncenter/el-table-columnel-table-columnv-ifcolData[2].istruepropkafanglabel年龄aligncenter/el-table-columnel-table-columnv-ifcolData[3].istruepropfengbilabel时间aligncenter/el-table-columnel-table-columnv-ifcolData[4].istruepropisETFlabel事件aligncenter/el-table-columnel-table-columnv-ifcolData[5].istrueproprangelabel地点aligncenter/el-table-column/el-tableel-popoverplacementrightwidth400triggerclickel-checkbox-groupv-modelcolOptionsel-checkboxv-foritem in colSelect:labelitem:keyitem/el-checkbox/el-checkbox-groupel-buttonslotreference设置/el-button/el-popover/div/templatescriptexportdefault{data(){return{tableData:[{name:fruit-1,date:apple-10,select:banana-10,kafang:orange-10},{name:fruit-2,date:apple-20,select:banana-20,kafang:orange-20}],colData:[{title:名称,istrue:true},{title:性别,istrue:true},{title:年龄,istrue:true},{title:时间,istrue:true},{title:事件,istrue:true},{title:地点,istrue:true}],colOptions:[],colSelect:[],}},mounted(){},created(){var_thisthis;for(leti0;i_this.colData.length;i){_this.colSelect.push(_this.colData[i].title);// if (_this.colData[i].title 名称) { //初始化不想展示的列可以放在这个条件里// continue;// }_this.colOptions.push(_this.colData[i].title);}},watch:{colOptions(valArr){vararrthis.colSelect.filter(ivalArr.indexOf(i)0);// 未选中this.colData.filter(i{if(arr.indexOf(i.title)!-1){i.istruefalse;this.$nextTick((){this.$refs.tableDataRef.doLayout();});}else{i.istruetrue;this.$nextTick((){this.$refs.tableDataRef.doLayout();});}});}},methods:{}}/script