el-table 固定列错位的问题

这篇具有很好参考价值的文章主要介绍了el-table 固定列错位的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

el-table 固定列错位的问题

问题描述

给el-table表个的操作列设置了固定,即fixed:right,出现了操作列高度与其他列高度不统一 ,导致行错位的情况,如下图:
并且即便重新渲染表格,也无法解决该问题
el-table固定列错位,踩过的坑,vue.js,前端,javascript,css

问题分析

1.将出操作列以外的其他列的代码都注释,会看到表格变成下图:
el-table固定列错位,踩过的坑,vue.js,前端,javascript,css
可以看到左侧一列没有内容的表格列,可以理解为这是固定的操作列在正常布局的投影,正是它在影响正常布局表格每一行的行高。
el-table固定列错位,踩过的坑,vue.js,前端,javascript,css
里面虽然看上去没有内容,实际上还是有三个看不见的按钮;并且这三个按钮的布局与固定的操作列有所不同,发生了换行,导致了第一行的行高变高
el-table固定列错位,踩过的坑,vue.js,前端,javascript,css
导致这种布局不同的最终原因是因为,投影列里的按钮有一个margin-left属性,而操作列则没有。

问题解决

对于我个人来说,解决方法如下

/deep/.el-button + .el-button {
    margin-left: 0px;
  }

总结

每个人造成错位的原因可能不同,但是背后的原因都是投影列与固定列的样式不同导致了实际渲染出来的效果和预想效果出现了偏差,而解决方法都一样,即统一投影列与固定列的样式。文章来源地址https://www.toymoban.com/news/detail-606823.html

到了这里,关于el-table 固定列错位的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • MongoDB踩过的坑

    目录 ‘mongodump‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件 备份数据库 启动MongoDB服务 可视化工具:MongoDB Compass 由于目标计算机积极拒绝,无法连接  BSONObj size: xxxx is invalid. Size must be between 0 and 16793600 (16MB) mongodb默认时没有mogodump.exe工具和mongorestore.exe工具

    2024年02月16日
    浏览(37)
  • el-table组件的el-table-column电脑端使用fixed属性固定,移动端不使用固定,怎么实现?

           要在电脑端使用 fixed 固定列,而在移动端不使用,可以使用 CSS 媒体查询结合 Vue 的动态绑定来实现。以下是一个示例代码:        在上面的示例中,我们使用 isDesktop 数据属性来判断当前设备是否为电脑端。通过监听窗口的 resize 事件,动态更新 isDesktop 的值。然后

    2024年02月15日
    浏览(32)
  • el-table添加固定高度height后高度自适应

    新建目录src/directive/el-table 在el-table目录下新建文件adaptive.js 在el-table目录下新建index.js 在所需使用的vue页面中引入 import adaptive from ‘…/…/…/src/directive/el-table’ 在main.js中引入 在el-table标签中添加属性 v-adaptive:自定义指令,bottomOffset 代表距离底部的距离 height:高度属性,

    2024年02月08日
    浏览(34)
  • 安装whisper模块踩过的坑

    如果你和我一样,通过以下命令安装whisper 但却出现了 fatal: unable to access \\\'https://github.com/openai/whisper.git/\\\': OpenSSL SSL_read: Connection was reset, errno 10054 那么只需要 在运行 pip install 之前在运行以下的命令,再次重新 pip install ... 即可 原因: 安装whisper需要先安装rust环境依赖。 官方在

    2024年02月15日
    浏览(37)
  • 记录一下postman汉化踩过的坑

    postman安装后会频繁的进行更新,每次更新后我们会发现,postman界面就会回到原来的英文界面。这是由于汉化包的版本和postman的版本不一致导致的。 postman汉化包的更新滞后于postman的更新,如果要成功将postman汉化,就要下载以前的版本保证postman的版本和汉化包的版本一致。

    2024年02月15日
    浏览(34)
  • element-ui 表格el-table高度不是一个固定值时固定表头

    elementui中为表格组件提供了height属性实现固定表头 height可以为数字或者字符串,当为一个数字时表示固定的高度,也可以为百分比等字符串。 当height不是一个固定值时,如期望表格可以填充完页面剩余空间,并且固定表头时,可以通过给height属性赋值字符串形式实现。以页

    2024年01月25日
    浏览(50)
  • docker+selenium+firefox | 我踩过的坑

    为了实现SSPUBot不在我电脑上部署,我只能将其制成Docker。 要知道SSPUBot在开发的时候用了selenium+Firefox的想法开发,所以Docker里面必须要有Firefox,结果这就让见识到了最顽固的错误 selenium.common.exceptions.WebDriverException: Message: Process unexpectedly closed with status 255 我们还是省略我找的

    2024年01月22日
    浏览(46)
  • Spark搭建日志,记录一些踩过的坑

    本人在Centos中使用三个虚拟机(node1,node2,node3)搭建hadoop与Spark分布式环境(具体见后记中的Hadoop安装),本文记录一些踩过的坑 解决办法:sudo chown -R 用户名 /spark(spark或者hadoop所在目录) 原理:文件的初始所有者不是用户名(如root),要把spark目录的初始所有者更换为自

    2024年03月14日
    浏览(76)
  • 关于python的mediapipe库踩过的坑

      大家好,我是csdn的博主: lqj_本人 这是我的个人博客主页: lqj_本人的博客_CSDN博客-微信小程序,前端,vue领域博主 lqj_本人擅长微信小程序,前端,vue,等方面的知识 https://blog.csdn.net/lbcyllqj?spm=1000.2115.3001.5343 哔哩哔哩欢迎关注: 小淼前端 小淼前端的个人空间_哔哩哔哩_bilibil

    2024年01月17日
    浏览(30)
  • el-table(vue2中)滚动条被固定列盖住

      vue2 + el-table         1、现场图片:                          2、全局css环境配置了滚动条高度为 6px         3、el-table设置滚动条为 15px (比全局高9px) el-table固定列(是根据全局滚动条高度计算,导致覆盖掉滚动条9px,只显示6px) 改变el-table固定列的计算

    2024年02月07日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包