VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2019-01-29 12:43
4043 查看
在开发中,需要表格控件根据浏览器高度进行调整,固定表头,且然后多余的出滚动条,官方给出的:
只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码。
然后直接上template代码:
<template> <el-table :data="tableData3" height="250" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> </el-table> </template>
其中height="250"是固定值,我们可以在data中设置一个tableHeight,其中x是根据你布局自己算出来的值,也可以换成动态监测的值,就是父级到body的值,这个可以自行添加
data(){ return{ tableHeight: window.innerHeight - x } }
template中:
<template> <el-table :data="tableData3" :height="tableHeight" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> </el-table> </template>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue2.0 + element UI 中 el-table 数据导出Excel的方法
- elementUI el-table表格列排序的两种方法
- ElementUI el-table 在flex下的宽度自适应问题
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
- Element UI 中可展开表格手风琴效果实现(toggleRowExpansion方法的正确使用方式)
- Vue2.0 + ElementUI的+ PageHelper实现的表格分页
- [置顶] element-ui 表格实现单元格可编辑的方法
- 解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
- vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
- Element UI的表格table列的宽度自适应设置
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- element ui table(表格)实现点击一行展开功能
- Vue2.0+ElementUI+PageHelper实现的表格分页
- Element-ui table中过滤条件变更表格内容的方法
- vue+elementui的table行内实现el-upload文件添加/多文件上传
- IOS7.0 UILabel实现自适应高度的新方法
- javascript实现table表格隔行变色的方法
- js实现iframe自动自适应高度的方法
- element UI table表格组件使用[超级完整功能]
- JS实现自适应高度表单文本框的方法