前端

一.筛选弹出框:<el-col:span="1.5"><el-popoverplacement="bottom"title="筛选列"trigger="click"width="40"><el-checkbox-groupv-model="checkedColumns"size="mini"><el-checkboxv-for="itemincheckBoxGroup":key="item":label="item":value="item"></el-checkbox></el-checkbox-group><el-buttonicon="el-icon-plus"size="mini"slot="reference">筛选列</el-button></el-popover></el-col>二.给每一列添加v-if<el-table-columnv-if="colData[0].istrue"prop="serverCode"label="编号"width="80px"></el-table-column>注意:要给el-table添加:key="reload"属性,这是为了主动重新渲染列表,避免组件自动使用缓存而不刷新。三.data(){return{//colData中列出表格中的每一列,默认都展示colData:[{title:"编号",istrue:true},{title:"内网IP",istrue:true},{title:"设备状态",istrue:true},{title:"持续时间",istrue:true},{title:"更新时间",istrue:true},{title:"服务状态",istrue:true},{title:"工作状态",istrue:true},{title:"是否请允许关机",istrue:true},{title:"服务器类型",istrue:true},],,//多选框的列表,列出表格的每一列checkBoxGroup:["编号","内网IP","设备状态","持续时间","更新时间","服务状态","工作状态","是否请允许关机","服务器类型"],//当前选中的多选框,代表当前展示的列checkedColumns:["编号","内网IP","设备状态","持续时间","更新时间","服务状态","工作状态","是否请允许关机","服务器类型"]}}四.监听筛选列事件watch:{checkedColumns(val){letarr=this.checkBoxGroup.filter(i=>!val.includes(i));this.colData.filter(i=>{if(arr.indexOf(i.title)!=-1){i.istrue=false;}else{i.istrue=true;}});//解决表格闪烁问题(不一定出现)this.reload=Math.random()}}

2021-7-19 1408 0
2021-4-9 10001 0