element-ui里的table中表头与表格出现错位

现象:

原因:电脑显示的缩放引起的,并且发现同为webkit内核的Google浏览器和360浏览器中360浏览器显示正常,而Google浏览器才会出现这个问题。

解决方案

找到项目入口文件(敲黑板重点!!),添加全局样式:

.el-table th.gutter{
    display: table-cell!important;
}

效果:

看着顺眼多了吧~

element-ui表格样式错乱调整方式

在vue中封装了element-ui表格,然后使用插槽,fixed定位等,导致样式出现了错乱,以下提供几种错乱方式的解决方法

1、线没有对齐

在全局样式中写下这样的代码

/* Element-UI 的table 组件出现表格线条不对齐的问题 */
body .el-table th.gutter {
    display: table-cell !important
}

2、fixed固定导致的高度问题

全局样式中写如下代码

.el-table__fixed-right{
    height: 100% !important;
}

3、去掉鼠标hover修改背景色事件

/* 去掉鼠标hover事件 */
/* tr {
    pointer-events: none;
} */

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。 

vue element-ui里的table中表头与表格出现错位的解决的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. 第七章:table单元格的选择和UIAlertController

    运行app,自己试试选择cell更多关于UIAlertController再继续研究之前,我们需要更多的了解一下UIAlertController。UIAlertController是在iOS8引入用来替代UIAlertView和UIActionSheet的。参照上面的代码片段,我们可以指定UIAlertController的preferredStyle。创建好动作后可以使用addAction将动作和UIAlertController连接起来。这就是使用UIAlertController的方法。

  3. tableview使用自定义类,页面跳转,本地存储

    如图,添加下面的三行代码2下面创建自己的cell,新建一个swift文件,命名为TableViewCell3因为还要考虑到界面的跳转,需要新建swift文件PushTest

  4. Swift UITableView相关功能八

    但是,我们发现当我们点击右侧索引的时候好像和table的关系不明确。其实我们少了一个代理方法,他是专门用来关联索引和table分区的这里我们简单设置了一下,将字母顺序和table的分区对应上了。

  5. Swift设置Table View的Cell中Lable自适应内容高度的

    Swift设置TableView的Cell中Lable自适应内容高度的最后修改在TableCell中Label的lines属性,将其设置为0。

  6. 更加 Swift 化的 Collection View 和 Table View Cells

    本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请发送邮件至dio@foxmail.com举报,一经查实,本站将立刻删除。

  7. 制作一个可以滑动操作的 Table View Cell

    本教程将会向你展示如何制作一个这样的TableViewCell,而不用因嵌套的ScrollView陷入困境。如果你还不知道一个可滑动的TableViewCell意味着什么,那么看看Apple的邮件应用:可能你会想,既然Apple展示了这种方案,那它应该已将其开放给开发者使用了。这会要求你深入研究iOS7UITableViewCell的结构,以便复制出我们需要的行为。打开MasterViewController.m并找到viewDidLoad。这个循环添加了一些字符串到_objects数组,应用运行时,这些

  8. 如何实现可收起和展开的Table Section

    如何实现可收起和展开的TableSection这是一个简单的iOSswift项目,旨在介绍如何实现可收起和展开的tablesection,并且,项目不需要mainstoryboard,XIB,注册nib等,只需要纯的Swfit代码!切换收起和展开的函数如下:注意到我们不是简单的重绘整个section,实际上我们只需要重绘section里的所有cell就好,这样做的好处是避免了sectionheader因重绘时闪烁的效果,最重要是的可以让我们更平滑地处理我们想要的动画效果,例如旋转那个箭头,改变背景颜色等等

  9. Swift iOS: UITableView的使用

    Table继承于UITableView,并实现UITableViewDataSource,UITableViewDelegate,在配合代码:就指明了UITableView的数据源对象为Table,委托对象也是Table。前者指明此对象是UITableView的数据提供者,后者指明此对象是UITableView的外观和行为的提供者。添加删除修改类UITableView不但可以显示内容,还可以配合很多操作。标记类UITableView支持对每个行做标记和取消标记,标记可以有多种。可以通过官方手册查询UITa

  10. android – SQLiteDatabase – 如何使用where子句?

    例如,如果我想要TIMetaBLE_MODULECODE=123.我将如何做到这一点,我已经读过它的第一个null.我在下面尝试了这个,但仍然无法正常工作解决方法TABLE_ROW_ID“=”rowID,这里“=”是where子句

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部