VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

 更新时间:2018年11月28日 14:54:57   作者:River_mx  
在开发中,需要表格控件根据浏览器高度进行调整,固定表头,本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法,非常具有实用价值,需要的朋友可以参考下

在开发中,需要表格控件根据浏览器高度进行调整,固定表头,且然后多余的出滚动条,官方给出的:

只要在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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue中使用md5进行数据加密的实现方法

    Vue中使用md5进行数据加密的实现方法

    在现代Web开发中,数据安全是一个不可忽视的重要环节,Vue.js作为一个流行的前端框架,不仅提供了强大的数据绑定和组件化功能,还支持与各种后端服务的集成,本文将探讨如何在Vue应用中使用MD5算法来加密数据,从而提升应用的安全性,需要的朋友可以参考下
    2024-10-10
  • vue实现表格数据的增删改查

    vue实现表格数据的增删改查

    这篇文章主要为大家详细介绍了vue实现表格数据的增删改查,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue实现移动端可拖拽式icon图标

    vue实现移动端可拖拽式icon图标

    这篇文章主要为大家详细介绍了vue实现移动端可拖拽式icon图标,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue实现可复用轮播组件的方法

    Vue实现可复用轮播组件的方法

    这篇文章主要为大家详细介绍了Vue实现可复用轮播组件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue3+ts项目之安装eslint、prettier和sass的详细过程

    vue3+ts项目之安装eslint、prettier和sass的详细过程

    这篇文章主要介绍了vue3+ts项目02-安装eslint、prettier和sass的详细过程,在本文讲解中需要注意执行yarn format会自动格式化css、js、html、json还有markdown代码,需要的朋友可以参考下
    2023-10-10
  • 解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题

    解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题

    这篇文章主要介绍了解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue3使用全局函数或变量的2种常用方式代码

    Vue3使用全局函数或变量的2种常用方式代码

    在Vue3项目中需要频繁使用某一个方法,配置到全局感觉会方便很多,这篇文章主要给大家介绍了关于Vue3使用全局函数或变量的2种常用方式,需要的朋友可以参考下
    2023-09-09
  • vue使用this.$message不生效的部分原因及解决方案

    vue使用this.$message不生效的部分原因及解决方案

    这篇文章主要介绍了vue使用this.$message不生效的部分原因及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • webpack+vue-cil 中proxyTable配置接口地址代理操作

    webpack+vue-cil 中proxyTable配置接口地址代理操作

    这篇文章主要介绍了webpack+vue-cil 中proxyTable配置接口地址代理操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue基础知识快速入门教程

    Vue基础知识快速入门教程

    这篇文章主要介绍了Vue基础知识快速入门教程,我们可以先学会用,使用一段时间之后,回头来熟悉一下Vue框架以及它的特点,需要的朋友可以参考下
    2023-05-05

最新评论