vue element-ui里的table中表頭與表格出現(xiàn)錯位的解決
更新時間：2022年08月24日 09:23:22 作者：khadijiah
這篇文章主要介紹了vue element-ui里的table中表頭與表格出現(xiàn)錯位的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
element-ui里的table中表頭與表格出現(xiàn)錯位
現(xiàn)象：
原因：電腦顯示的縮放引起的，并且發(fā)現(xiàn)同為webkit內(nèi)核的Google瀏覽器和360瀏覽器中360瀏覽器顯示正常，而Google瀏覽器才會出現(xiàn)這個問題。
解決方案
找到項目入口文件（敲黑板重點?。。?，添加全局樣式：
.el-table th.gutter{
display: table-cell!important;
}效果：
看著順眼多了吧～
element-ui表格樣式錯亂調(diào)整方式
在vue中封裝了element-ui表格，然后使用插槽，fixed定位等，導(dǎo)致樣式出現(xiàn)了錯亂，以下提供幾種錯亂方式的解決方法
1、線沒有對齊
在全局樣式中寫下這樣的代碼
/* Element-UI 的table 組件出現(xiàn)表格線條不對齊的問題 */
body .el-table th.gutter {
display: table-cell !important
}2、fixed固定導(dǎo)致的高度問題
全局樣式中寫如下代碼
.el-table__fixed-right{
height: 100% !important;
}
3、去掉鼠標(biāo)hover修改背景色事件
/* 去掉鼠標(biāo)hover事件 */
/* tr {
pointer-events: none;
} */
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在web項目開發(fā)的過程中,經(jīng)常會遇到客服端重復(fù)發(fā)送請求的場景,下面這篇文章主要給大家介紹了關(guān)于Vue路由切換和Axios接口取消重復(fù)請求的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue控制多行文字展開收起的實現(xiàn)示例（也叫控制文字展開隱藏），文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue elementui tree 任意級別拖拽功能代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3?使用v-model實現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
本篇文章主要介紹了詳解vue-cli多頁面工程實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
vue子組件調(diào)用父組件的方法其實不難,最近整理了一下,下面這篇文章主要給大家介紹了關(guān)于Vue中子組件調(diào)用父組件的3種方法,需要的朋友可以參考下2022-05-05
iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例
這篇文章主要為大家介紹了iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了vue的常用組件操作方法應(yīng)用分析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
這篇文章主要介紹了在vue2?中使用?tailwindcss的方法?親測可用,本文分步驟給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue實現(xiàn)前進刷新，后退不刷新效果,即加載過的界面能緩存起來（返回不用重新加載），關(guān)閉的界面能被銷毀掉（再進入時重新加載）。本文給大家分享實現(xiàn)思路，需要的朋友可以參考下2018-01-01