vue动态改变el-table表格列

方法1

<template><divclass="mainBox"><divclass="optshowBox"><el-popoverplacement="bottom"trigger-"click"width="200"popper-class="popperStyle"><template#reference><ptitle="表头配置"><el-iconisize="20"><Setting/></el-icon></p></template><div><el-checkbox-groupv-model="checkedHeaders"><el-checkboxv-for="item in state.options":key="item.prop":label-"item.prop">{{item.label}}</el-checkbox></el-checkbox-group></div></el-popover><el-popoverplacement="right"trigger="hover"width="260"popper-class="popperstyle"></el-popover></div><divclass="tableBox"><el-table:data="state.tableData"v-loading="state.searchLoading"id="exportTab”style="width:100%” height="100%"borderhighlight-current-rowref="yjRef"><el-table-columnlabel="序号"width="45"><!--分页连续序号--><template#default="{$index}">{{ (state.pageNum -1) * state.pagesize + $index +1 }}</template></el-table-column><el-table-columnv-for="(item, index) in filterHeaders":key="index":prop="item.prop":label="item.label":width="item.width"></el-table-column></el-table></div></div></template><scriptsetup>import{onMounted,reactive,ref,watch,computed}from'vue'conststate=reactive({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',]constcheckedHeaders=ref(state.options.filter(item=>!hideList.includes(item.prop)).map(el=>el.prop))// 表头默认需要隐藏的单个字段// const checkedHeaders = ref(state.options.filter(item=>item.prop !=='bj').map(el=>el.prop)) //默认标记不展示watch(checkedHeaders,(newval)=>{localstorage.setItem('tale-header',JSON.stringify(newval))},{deep:true})constfilterHeaders=computed(()=>{returnstate.options.filter(el=>checkedHeaders.value.includes(el.prop))})</script>

方法2

<template><divclass="conter"><el-table:data="tableData"stripeborderstyle="width:98%"ref="tableDataRef"><!-- <el-table-column type="selection" width="55" align="center"></el-table-column> --><el-table-columntype="index"width="55"label="序号"align="center"></el-table-column><el-table-columnv-if="colData[0].istrue"prop="name"label="名称"align="center"></el-table-column><el-table-columnv-if="colData[1].istrue"prop="select"label="性别"align="center"></el-table-column><el-table-columnv-if="colData[2].istrue"prop="kafang"label="年龄"align="center"></el-table-column><el-table-columnv-if="colData[3].istrue"prop="fengbi"label="时间"align="center"></el-table-column><el-table-columnv-if="colData[4].istrue"prop="isETF"label="事件"align="center"></el-table-column><el-table-columnv-if="colData[5].istrue"prop="range"label="地点"align="center"></el-table-column></el-table><el-popoverplacement="right"width="400"trigger="click"><el-checkbox-groupv-model="colOptions"><el-checkboxv-for="item in colSelect":label="item":key="item"></el-checkbox></el-checkbox-group><el-buttonslot="reference">设置</el-button></el-popover></div></template><script>exportdefault{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_this=this;for(leti=0;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){vararr=this.colSelect.filter(i=>valArr.indexOf(i)<0);// 未选中this.colData.filter(i=>{if(arr.indexOf(i.title)!=-1){i.istrue=false;this.$nextTick(()=>{this.$refs.tableDataRef.doLayout();});}else{i.istrue=true;this.$nextTick(()=>{this.$refs.tableDataRef.doLayout();});}});}},methods:{}}</script>