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