返回顶部
首页 > 资讯 > 前端开发 > html >iview中怎么设置table高度动态
  • 332
分享到

iview中怎么设置table高度动态

2024-04-02 19:04:59 332人浏览 薄情痞子
摘要

iview中怎么设置table高度动态,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一、我的机器二、别人的机器三、解决办法原因就是因为表格高度

iview中怎么设置table高度动态,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

一、我的机器

iview中怎么设置table高度动态

二、别人的机器

iview中怎么设置table高度动态

三、解决办法

原因就是因为表格高度是固定的,在大分辨率下的屏幕可以显示,小分辨率的屏幕就显示不完全,所以我们需要动态的去设置表格的高度,设置方法如下:

1、iview table的写法:

<Table highlight-row border :columns="columns7" :data="data6" ref="table" :height="tableHeight"></Table>

2、高度设置,初始化的时候就设置

(1)首先在data里面初始化

tableHeight: 450,

(2)初始化

mounted() { 
 // 设置表格高度 
 this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 160 
 },

window.innerHeight是浏览器的可用高度,this.$refs.table.$el.offsetTop是表格距离浏览器可用高度顶部的距离,这样就可以完成动态设置了,这样的话就可以适应任何pc端屏幕了

看完上述内容,你们掌握iview中怎么设置table高度动态的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网html频道,感谢各位的阅读!

--结束END--

本文标题: iview中怎么设置table高度动态

本文链接: https://lsjlt.com/news/75739.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • iview中怎么设置table高度动态
    iview中怎么设置table高度动态,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一、我的机器二、别人的机器三、解决办法原因就是因为表格高度...
    99+
    2024-04-02
  • vue iview 导航高亮动态设置方式
    目录vue iview导航高亮动态设置vue element导航栏高亮显示问题问题1问题2vue iview导航高亮动态设置 在开发的是时候,路由发生了跳转但是发现导航的没有进行高...
    99+
    2024-04-02
  • 怎么设置span宽度高度
    本篇内容介绍了“怎么设置span宽度高度”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!span宽度高度设置...
    99+
    2024-04-02
  • 怎么设置div高度
    本篇内容介绍了“怎么设置div高度”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!如何对div设置高度呢?答...
    99+
    2024-04-02
  • vue中iview列表table render函数如何设置DOM属性值
    小编给大家分享一下vue中iview列表table render函数如何设置DOM属性值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一...
    99+
    2024-04-02
  • JavaScript怎么设置Iframe高度
    这篇“JavaScript怎么设置Iframe高度”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看...
    99+
    2024-04-02
  • react怎么设置div高度
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么设置div高度?react动态设置元素高度使用react实现动态修改样式(不建议使用此方式,除非没有其他选择)如下图所示:需求实现图中的更换...
    99+
    2023-05-14
    React.js
  • CSS中怎么设置div高度为30px
    这篇文章主要讲解了“CSS中怎么设置div高度为30px”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中怎么设置div高度为30px”吧!   .h...
    99+
    2024-04-02
  • css中p标签怎么设置高度
    这篇文章主要介绍“css中p标签怎么设置高度”,在日常操作中,相信很多人在css中p标签怎么设置高度问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css中p标签怎么设置高度”...
    99+
    2024-04-02
  • 怎么在css中设置div的高度
    今天就跟大家聊聊有关怎么在css中设置div的高度,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。操作环境:windows10系统、css 3、thinkpad t480电脑。我们可以...
    99+
    2023-06-08
  • 微信小程序如何动态设置图片的高度和宽度
    这篇文章主要介绍了微信小程序如何动态设置图片的高度和宽度,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言:在小程序布局中,如果图片不是固定...
    99+
    2024-04-02
  • 如何在HTML中设置table宽度
    这期内容当中小编将会给大家带来有关如何在HTML中设置table宽度,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。给table标签使用border属性添加边框后,默认宽度有里面的内容决定:<tabl...
    99+
    2023-06-15
  • 如何在css中设置滚动条高度
    如何在css中设置滚动条高度?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。css设置滚动条的样式注意:滚动条设置的width、height,分别是对应纵向滚动条 宽度、横向滚动...
    99+
    2023-06-15
  • CSS宽度、高度属性怎么设置
    这篇文章主要介绍了CSS宽度、高度属性怎么设置的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS宽度、高度属性怎么设置文章都会有所收获,下面我们一起来看看吧。CSS 设置高度...
    99+
    2024-04-02
  • uniapp怎么设置元素高度为窗口高度
    随着移动互联网的发展,手机成为人们生活中不可或缺的一部分,移动端的开发越来越受到重视。而uniapp作为一款跨平台的开发框架,在移动端开发中扮演着至关重要的角色。在uniapp中,设置元素高度为窗口高度是一个常见的需求,本文将为大家详细介绍...
    99+
    2023-05-14
  • ubuntu怎么设置动态ip
    这篇文章主要介绍了ubuntu怎么设置动态ip的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇ubuntu怎么设置动态ip文章都会有所收获,下面我们一起来看看吧。打开终端命令行。输入以下命令查看网卡名称。$ if...
    99+
    2023-07-04
  • jquery中怎么动态设置css样式
    这篇文章给大家介绍 jquery中怎么动态设置css样式,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。代码如下:function viewPictures() { var link =...
    99+
    2024-04-02
  • css3怎么设置文本高度
    这篇文章主要讲解了“css3怎么设置文本高度”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3怎么设置文本高度”吧! 在cs...
    99+
    2024-04-02
  • css怎么设置边框高度
    本篇内容介绍了“css怎么设置边框高度”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!css中边框的宽高取决于div的宽高,设置div宽高即可...
    99+
    2023-07-04
  • datagridview行的高度怎么设置
    要设置DataGridView的行高,可以使用以下方法之一:1. 使用RowTemplate属性设置默认行高:```csharpda...
    99+
    2023-08-23
    datagridview
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作