element-ui table高度自适应实现分享

概要

在后台管理系统开发过程中，通常我们的布局都是如下图。这里面比较头疼的问题就是右侧这个table的高度自适应问题，接下来我将分享如何简单实现表格高度自适应。

实现思路

1、表格高度=视口高度-头部搜索表单的高度-其他（margin/padding）
2、为了不每个组件都写那些计算的代码，提取一个mixins，要实现自适应引用下就行

具体代码

自适应封装mixins代码

首先那个toggleExpand方法不看。

1、组件第一次渲染算一次，第一次就不用防抖了；
2、然后就是注册resize事件，窗口尺寸变化再触发计算，这里要防抖啊；
3、里面查询表单的高度要动态获取，原因就是不同窗口尺寸表单项会出现换行的情况。

exportdefault{data(){return{fixedHeight:120,tableHeight:undefined,resizeTimer:null,isExpanded:false}},mounted(){this.updateHeight()window.addEventListener('resize',this.resizeHandler)},beforeDestroy(){window.removeEventListener('resize',this.resizeHandler)},methods:{resizeHandler(){this.resizeTimer&&clearTimeout(this.resizeTimer)this.resizeTimer=setTimeout(()=>{this.updateHeight()},300)},updateHeight(){constformEl=document.querySelector('.header-form')constformHeight=formEl?formEl.offsetHeight:60this.tableHeight=window.innerHeight-this.fixedHeight-formHeight-20},toggleExpand(){this.isExpanded=!this.isExpandedthis.$nextTick(()=>{this.updateHeight()})}}}

使用示例组件代码

1、这里代码不兴放一半所以App代码也放在下面了；
2、使用步骤：
（1）、导入注册mixins
（2）、然后table height绑定tableHeight，这样就OK了

App组件代码

<template><div id="app"><divclass="header-container"></div><divclass="bottom-container"><divclass="bottom-left-container"></div><divclass="bottom-right-container"><User/></div></div></div></template><script>importUserfrom'@/views/User.vue'exportdefault{components:{User}}</script><style lang="less">#app{position:fixed;top:0;left:0;height:100%;width:100%;display:flex;flex-direction:column;.header-container{height:80px;background-color:#34495d;}.bottom-container{height:0;flex:1;display:flex;.bottom-left-container{width:200px;height:100%;background-color:#43bd87;}.bottom-right-container{height:100%;width:0;flex:1;overflow:auto;}}}</style>

User组件代码

<template><divclass="user-container"><el-form label-position="left"label-width="50px":model="formDtas"class="header-form"><el-row:gutter="20"><el-col:xs="24":sm="12":md="8":lg="6"><el-form-item label="姓名"><el-input v-model="formDtas.Name"></el-input></el-form-item></el-col><el-col:xs="24":sm="12":md="8":lg="6"><el-form-item label="年龄"><el-input v-model="formDtas.Age"></el-input></el-form-item></el-col><el-col:xs="24":sm="12":md="8":lg="6"><el-form-item label="姓名"><el-input v-model="formDtas.Name"></el-input></el-form-item></el-col><el-col:xs="24":sm="12":md="8":lg="6"><el-form-item label="年龄"v-if="isExpanded"><el-input v-model="formDtas.Age"></el-input></el-form-item><div v-else><el-button type="primary">查询</el-button><el-button type="text"@click="toggleExpand"class="expand-btn">{{isExpanded?'收起':'展开'}}<i:class="['el-icon-arrow-' + (isExpanded ? 'up' : 'down')]"></i></el-button></div></el-col></el-row><div v-if="isExpanded"><el-row:gutter="20"><el-col:xs="24":sm="12":md="8":lg="6"><el-form-item label="姓名"><el-input v-model="formDtas.Name"></el-input></el-form-item></el-col><el-col:xs="24":sm="12":md="8":lg="6"><el-form-item label="年龄"><el-input v-model="formDtas.Age"></el-input></el-form-item></el-col><el-col:xs="24":sm="12":md="8":lg="6"><div><el-button type="primary">查询</el-button><el-button type="text"@click="toggleExpand"class="expand-btn">{{isExpanded?'收起':'展开'}}<i:class="['el-icon-arrow-' + (isExpanded ? 'up' : 'down')]"></i></el-button></div></el-col></el-row></div></el-form><el-table:data="tableDatas"style="width: 100%"border:height="tableHeight"><el-table-column prop="Name"label="姓名"></el-table-column><el-table-column prop="Age"label="年龄"></el-table-column><el-table-column prop="Gender"label="性别"></el-table-column></el-table></div></template><script>importtableAutoHeightfrom'@/mixins/tableAutoHeight.js'exportdefault{mixins:[tableAutoHeight],data(){return{formDtas:{Name:'',Age:''},tableDatas:[{Name:'张三',Age:20,Gender:'男'},{Name:'王五',Age:30,Gender:'男'},{Name:'李四',Age:25,Gender:'女'},{Name:'老王',Age:25,Gender:'女'},{Name:'张三',Age:20,Gender:'男'},{Name:'王五',Age:30,Gender:'男'},{Name:'李四',Age:25,Gender:'女'},{Name:'老王',Age:25,Gender:'女'},{Name:'张三',Age:20,Gender:'男'},{Name:'王五',Age:30,Gender:'男'},{Name:'李四',Age:25,Gender:'女'},{Name:'老王',Age:25,Gender:'女'},{Name:'张三',Age:20,Gender:'男'},{Name:'王五',Age:30,Gender:'男'},{Name:'李四',Age:25,Gender:'女'},{Name:'老王',Age:25,Gender:'女'},{Name:'张三',Age:20,Gender:'男'},{Name:'王五',Age:30,Gender:'男'},{Name:'李四',Age:25,Gender:'女'},{Name:'老王',Age:25,Gender:'女'}]}},mounted(){},computed:{},methods:{},}</script><style scoped lang="less">.user-container{padding:20px;}</style>

附加分享

实现了表格自适应想处理下头部查询表单项换行的问题。这里就使用格栅布局。
思路：1、每行显示四列，折叠的情况下第一行最后一列就显示那个查询按钮，展开情况下第一行最后列就是表单项显示，按钮隐藏；2、超出四个的表单项都用一个div包起来（el-row超出会自动换行的），初始隐藏，展开就显示；3、触发展开/隐藏表格高度要重新算啊。
代码都在上面了，相信各位大佬肯定是看得懂的。