首页 > 其他分享 >elementUI 的el-table中使用了动态列出现高度塌陷

elementUI 的el-table中使用了动态列出现高度塌陷

时间:2023-01-16 16:57:16浏览次数:44  
标签:el updated elementUI 高度 塌陷 table 页面

使用动态列的表格初次加载时出现塌陷

解决方法

  1. 首先检查你的布局是否有问题,具体方法是页面生成后发生高度塌陷再使用控制台缩放页面大小时,引起页面重绘后高度恢复正常,这时候说明你的布局是没问题。若仍旧高度塌陷,请你先检查你的布局代码。
  2. 若布局没有问题,则需要在updated钩子中使用el-talbe自带的doLayout方法。调用此方法后table组件会重排。

  updated(){
    this.$refs.mainTable.doLayout()
  },

思考

为什么使用固定列的时候没有发现这个问题,我觉得是动态列,都是经过请求并且整理数据后才展示在页面上的,固定列则是写死在代码里的,动态列的渲染肯定比固定列要慢的,但是浏览器已经完成了渲染,所以出现了高度塌陷。
使用控制台尝试缩放页面触发页面重绘,发现页面重绘后高度恢复正常。所以在updated中调用el-talbe的重排,能保证每次表格发生变动时,页面都重排保证页面的初次加载准确。

标签:el,updated,elementUI,高度,塌陷,table,页面
From: https://www.cnblogs.com/wanglei1900/p/17055779.html

相关文章

  • Microsoft 365 开发篇:New Microsoft Graph Developer Proxy preview v0.3
    Blog链接:https://blog.51cto.com/13969817使用MicrosoftGraphDeveloperProxy的最新预览版本构建弹性和高性能的应用程序。在这个新版本中,我将介绍对MicrosoftGraph和其......
  • Centos7 配置iptables NAT端口转发
    打开端口转发的功能1,首先开启IP转发功能,默认是关闭的。临时修改:[root@localhost~]#echo1>/proc/sys/net/ipv4/ip_forward修改过后就马上生效,但如果系统重启后......
  • Vue.js框架:引入Element-ui和国际化i18n组件冲突及兼容问题处理
    一、问题如下要使用element-ui的表格时,在main.js中同时全局引入了element和i18n时,页面会报错如下:Errorinrender: TypeError:Cannotreadpropertiesofund......
  • 【问题记录】【VUE】【vue-pure-admin】ElPagination你使用了一些已被废弃的方法,导致
    1 问题描述最近在看vue-pure-admin(一个前端框架),框架挺好的正常该有的都有,主要是使用比较简单,使用表格组件的时候,会出现一个报错,分页组件会莫名的报错。2 解决办......
  • 01:Hello, World!
    ​​原题链接​​总时间限制:1000ms内存限制:65536kB描述对于大部分编程语言来说,编写一个能够输出“Hello,World!”的程序往往是最基本、最简单的。因此,这个程序常常作......
  • MySQL自定义排序ORDER BY FIELD
    在一些场景中,有场景A查询出一个已经排好顺序的id,需要到场景B中查询这些,使用mysql中的WHERE**IN(****),查询出来的结果并不是按照传入的list排序的.但是......
  • Powershell获取1年内未改密码的用户
    Powershell获取1年内未改密码的用户1、定义OU搜索范围:OU=BYSSOFT_OBJECT,DC=byssoft,DC=com2、定义输出结果文件#建议保存编码为:bom头+utf8$输入ou='OU=BYS_Users,OU=BY......
  • buuctf 变异凯撒 Quoted-printable 1 rabbit
    这题很明显要用凯撒解密,凯撒密码就是简单的位移操作,虽然用工具很容易就解出,但它是变异的,需要对照ASCII表,毕竟有特殊字符在里面,除了用工具,还可以写个小程序跑一下。afZ_r9VY......
  • 五、六(管理SELinux安全性、管理基本存储)
    五、管理SELinux安全性            setenforce命令只会临时更改模式,不会写到配置文件中。另外,用命令时可以用1代替enforcing,0代替Permissive......
  • HelloWorld详解
    1、新建一个文件夹名为Code用以存放代码,2、在文件夹中新建文件,后缀名为.java起名为Hello.java3、然后用Notepad++打开进行编写如下代码publicclassHello{ publics......