解决element-ui动态表头高度自适应问题_el-header高度 自适应

表格为动态表格头，但是不同类型组合到一起有不同的方式

1. 标识① 多选框为静态表格列
2. 标示②为动态表格列
3. 表格内容区域为自适应高度且在充满可视化窗口

实现方式

 <el-table :data="patInfoData" ref="table" highlight-current-row height="calc(100vh - 200px)">
           <el-table-column type="selection" width="45"></el-table-column>
           <el-table-column v-for="(item,index) in headerData" 
	           :prop="item.fieldName" 
	           :label="item.titleName" 
	           :key="index">
           </el-table-column>
</el-table>
1
2
3
4
5
6
7
8

headerData 为动态表格数据

你以为这就完了 ，当你加入数据你会发现

你的表格内容高度存在计算误差，并不是你想要的效果

解决方法

1. 使用doLayout重新渲染，在获取到表格数据之后使用 this.$refs.table.doLayout(),这种你会看到表格高度从小突然变大，用户体验不是很好
2. 使用计算函数，表头书写成

<el-table :data="patInfoData" ref="patTable" highlight-current-row :height="headerHeight">
计算函数
computed:{
   headerHeight(){
       if(this.headerData.length > 0){
           return 'calc(100vh - 200px)'
       }
       return '100%'
   }
 },
1
2
3
4
5
6
7
8
9
10