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è)問(wèn)題。
解決方案
找到項(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、線沒(méi)有對(duì)齊
在全局樣式中寫(xiě)下這樣的代碼
/* Element-UI 的table 組件出現(xiàn)表格線條不對(duì)齊的問(wèn)題 */
body .el-table th.gutter {
display: table-cell !important
}2、fixed固定導(dǎo)致的高度問(wèn)題
全局樣式中寫(xiě)如下代碼
.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實(shí)現(xiàn)抖音時(shí)間轉(zhuǎn)盤(pán)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)抖音時(shí)間轉(zhuǎn)盤(pán)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
本文主要介紹了在VueRouter中,meta對(duì)象的使用和配置方式,meta對(duì)象可以包含任何你希望附加到路由的自定義信息,這些配置信息可以靈活的滿足你的應(yīng)用需求,使得路由配置更具靈活性和可擴(kuò)展性2024-10-10
Vue和React響應(yīng)式的區(qū)別及說(shuō)明
React和Vue在響應(yīng)式機(jī)制上各有特點(diǎn)：Vue通過(guò)Proxy或Object.defineProperty自動(dòng)追蹤依賴,支持細(xì)粒度更新；React基于不可變數(shù)據(jù),通過(guò)setState顯式觸發(fā)更新,依賴虛擬DOM的Diff算法批量更新,Vue強(qiáng)調(diào)聲明式和自動(dòng)優(yōu)化,React強(qiáng)調(diào)函數(shù)式編程和顯式控制2025-02-02
這篇文章主要介紹了Element Tooltip 文字提示的使用示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue2.0 從零開(kāi)始_環(huán)境搭建操作步驟
下面小編就為大家?guī)?lái)一篇Vue2.0 從零開(kāi)始_環(huán)境搭建操作步驟。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Vue?vant-ui使用van-uploader實(shí)現(xiàn)頭像上傳功能
這篇文章主要介紹了Vue?vant-ui使用van-uploader實(shí)現(xiàn)頭像圖片上傳,項(xiàng)目中是使用有贊vant-ui框架實(shí)現(xiàn)的頭像上傳替換功能，用到了封裝的圖片壓縮封裝之后再去上傳圖片this.$imgUpload.imgZip(），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-05-05
vue中關(guān)于redirect(重定向)初學(xué)者的坑
這篇文章主要介紹了vue中關(guān)于redirect(重定向)初學(xué)者的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue.js組件使用開(kāi)發(fā)實(shí)例教程
Vue.js的組件可以理解為預(yù)先定義好了行為的ViewModel類。這篇文章主要介紹了Vue.js組件使用開(kāi)發(fā)實(shí)例教程的相關(guān)資料,需要的朋友可以參考下2016-11-11
快速解決element的autofocus失效問(wèn)題
這篇文章主要介紹了快速解決element的autofocus失效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明
這篇文章主要介紹了vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09