在使用el-table时，发现即使数据量很大，表格拖动到底部，下方滚动条才会显示。需求是无论何时在当前浏览器底部吸附一个滚动条。使用v-horizontal-scroll这是网上一个开源仓库el-table横向滚动条吸底使用方法安装npminstallel-table-horizontal-scroll注册（1）在main.js中全局注册importhorizontalScrollfrom'el-table-horizontal-scroll'Vue.use(horizontalScroll)（2）在单个页面注册importhorizontalScrollfrom'el-table-horizontal-scroll'exportdefault{directives:{horizontalScroll}}给table增加属性<el-table:data="data"v-horizontal-scroll="'always'"></el-table>效果图
一.筛选弹出框：<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()}}