溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“vue表頭錯位如何解決”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue表頭錯位如何解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
vue表頭錯位的解決辦法：1、找到項目入口文件，添加全局樣式為“.el-table th.gutter{display: table-cell!important;}”；2、在全局樣式中寫入代碼為“body .el-table th.gutter {display: table-cell !important}”；3、去掉鼠標hover修改背景色事件。
vue element-ui里的table中表頭與表格出現錯位的解決
現象：
原因：電腦顯示的縮放引起的，并且發現同為webkit內核的Google瀏覽器和360瀏覽器中360瀏覽器顯示正常，而Google瀏覽器才會出現這個問題。
找到項目入口文件（敲黑板重點！！），添加全局樣式：
.el-table th.gutter{
display: table-cell!important;
}
效果：
看著順眼多了吧～
在vue中封裝了element-ui表格，然后使用插槽，fixed定位等，導致樣式出現了錯亂，以下提供幾種錯亂方式的解決方法
在全局樣式中寫下這樣的代碼
/* Element-UI 的table 組件出現表格線條不對齊的問題 */
body .el-table th.gutter {
display: table-cell !important
}
全局樣式中寫如下代碼
.el-table__fixed-right{
height: 100% !important;
}
/* 去掉鼠標hover事件 */
/* tr {
pointer-events: none;
} */讀到這里，這篇“vue表頭錯位如何解決”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
