vue element-ui里的table中表頭與表格出現(xiàn)錯(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)?。。砑尤謽邮剑?/p>
.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-05vue elementui tree 任意級(jí)別拖拽功能代碼
這篇文章主要介紹了vue elementui tree 任意級(jí)別拖拽功能代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08Vue3?使用v-model實(shí)現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實(shí)現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06Vue中子組件調(diào)用父組件的3種方法實(shí)例
vue子組件調(diào)用父組件的方法其實(shí)不難,最近整理了一下,下面這篇文章主要給大家介紹了關(guān)于Vue中子組件調(diào)用父組件的3種方法,需要的朋友可以參考下2022-05-05iView 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在vue2?中使用?tailwindcss的方法?親測(cè)可用
這篇文章主要介紹了在vue2?中使用?tailwindcss的方法?親測(cè)可用,本文分步驟給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07vue實(shí)現(xiàn)前進(jìn)刷新后退不刷新效果
這篇文章主要介紹了vue實(shí)現(xiàn)前進(jìn)刷新,后退不刷新效果,即加載過的界面能緩存起來(返回不用重新加載),關(guān)閉的界面能被銷毀掉(再進(jìn)入時(shí)重新加載)。本文給大家分享實(shí)現(xiàn)思路,需要的朋友可以參考下2018-01-01