vue+elementui中的el-table表格高度自适应设置

Luffy船长

已于 2023-08-18 10:05:14 修改

阅读量8.8k

点赞数 2

文章标签： elementui vue.js javascript

于 2022-10-08 16:01:04 首次发布

本文链接：https://blog.csdn.net/m0_60741007/article/details/127210393

版权

项目场景：

vue+elementui中的el-table表格高度自适应设置

问题描述

在vue3中使用到分页的组件但是由于高度不能自适应导致切换分辨率就就被隐藏了

原因分析：

使用自带的属性可以解决大部分的问题但是涉及到其它组件结合使用就会起不到想要的效果

解决方案：

1.使用 :height="tableH" 动态绑定参数

<div class="box_column" style="width: 100%;">
									<el-table :data="tableData" style="width: 100% ; margin-top: 10px;" :height="tableH" border @row-click="handleClick">
										<el-table-column prop="NAME" label="姓名" min-width="100%" align="center">
										</el-table-column>
										<el-table-column prop="SEX" label="性别" min-width="80%" align="center">
										</el-table-column>
										<el-table-column prop="AGE" label="年龄" min-width="80%" align="center">
										</el-table-column>
										<el-table-column prop="VISIT_DATE" label="就诊时间" min-width="80%" align="center">
										</el-table-column>
										<el-table-column label="系统标识" min-width="80%">
											<template #default="scope">
												<el-button type="success" size="small" v-if="scope.row.REGISTRATION_STATUS == 1">已就诊</el-button>
												<el-button type="danger" size="small" v-if="scope.row.REGISTRATION_STATUS == 0">未就诊</el-button>
											</template>
										</el-table-column>
									</el-table>
									<el-pagination small background @size-change="UserSizeChange" @current-change="UserCurChange"
									 :current-page.sync="UCurPage" :page-sizes="[20, 50, 100]" :page-size="UserPageSize" layout="total, sizes, prev, pager, next, jumper"
									 :total="User_Total">
									</el-pagination>
								</div>

2.给绑定的参数在data中定义初值

3.定义方法使用window.innerHeight计算高度,将此方法在需要执行的地方调用即可

   const resizeone = function() { //设置表格和表单高度
               //获取窗口高度
               var wh = window.innerHeight - 70;
               _this.tableH = wh - 100;
           }