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