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

更新时间：2022年08月24日 09:23:22 作者：khadijiah

这篇文章主要介绍了vue element-ui里的table中表头与表格出现错位的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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;
} */

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中上传视频或图片或图片和文字一起到后端的解决方法
这篇文章主要介绍了vue中上传视频或图片或图片和文字一起到后端的解决方法，需要的朋友可以参考一下
2019-12-12
vite环境变量.env文件的配置及使用
在Vite中,我们可以使用环境变量来管理不同环境下的配置,本文主要介绍了vite环境变量.env文件的配置及使用,具有一定的参考价值,感兴趣的可以了解一下
2024-06-06
详解Vue3中侦听器watch的使用教程
学过 vue2 的小伙伴们肯定学习过侦听器，主要是用来监听页面数据或者是路由的变化，来执行相应的操作，在 vue3里面呢，也有侦听器的用法，功能基本一样,本文就来为大家详细讲讲
2022-07-07
vue中element 上传功能的实现思路
这篇文章主要介绍了vue中element 的上传功能的实现思路,本文大概通过两种实现思路，具体内容详情大家跟随脚本之家小编一起看看吧
2018-07-07
vue前端测试开发watch监听data的数据变化
这篇文章主要为大家介绍了vue测试开发watch监听data的数据变化，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-05-05
如何去除element-ui中table的hover效果
这篇文章主要介绍了如何去除element-ui中table的hover效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue SPA首屏加载缓慢问题解决方案
这篇文章主要介绍了Vue SPA首屏加载缓慢问题解决方案，首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容
2023-03-03
Element中select多数据加载优化的实现
本文主要介绍了Element中select多数据加载优化的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vue+G6图形化实现功能示例
这篇文章主要为大家介绍了vue+G6图形化实现功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
如何在Vue3中创建动态主题切换功能
在Vue3中实现动态主题切换功能,通过明亮和暗色主题的选择,提供个性化使用体验,使用setup语法糖优化代码,通过创建组件和响应式变量来进行主题切换,并动态加载CSS文件
2024-09-09