vue表頭錯位怎麼辦

vue表頭錯位的解決方法：1、找到項目入口文件，新增全域樣式為「.el-table th.gutter{display: table-cell!important;}」；2、在全域樣式中寫入程式碼為「body .el-table th.gutter {display: table-cell !important}」；3、去掉滑鼠hover修改背景色事件。

本教學操作環境：Windows10系統、vue3版、DELL G3電腦

vue表頭錯位怎麼辦?

vue element-ui裡的table中表頭與表格出現錯位的解決

element-ui裡的table中表頭與表格出現錯位

現象：

原因：電腦顯示的縮放引起的，並且發現同為webkit核心的Google瀏覽器和360瀏覽器中360瀏覽器顯示正常，而Google瀏覽器才會出現這個問題。

解決方案

找到專案入口檔案（敲黑板重點！！），新增全域樣式：

.el-table th.gutter{
    display: table-cell!important;
}

效果：

看著順眼多了吧～

element-ui表格樣式錯亂調整方式

在vue中封裝了element-ui表格，然後使用插槽，fixed定位等，導致樣式出現了錯亂，以下提供幾種錯亂方式的解決方法

#1、線沒有對齊

在全域樣式中寫下這樣的程式碼

/* Element-UI 的table 组件出现表格线条不对齐的问题 */
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;
} */

推薦學習：《vue影片教學》

以上是vue表頭錯位怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！