国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

el-table 固定列錯位的問題

這篇具有很好參考價值的文章主要介紹了el-table 固定列錯位的問題。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

el-table 固定列錯位的問題

問題描述

給el-table表個的操作列設置了固定,即fixed:right,出現了操作列高度與其他列高度不統(tǒng)一 ,導致行錯位的情況,如下圖:
并且即便重新渲染表格,也無法解決該問題
el-table固定列錯位,踩過的坑,vue.js,前端,javascript,css

問題分析

1.將出操作列以外的其他列的代碼都注釋,會看到表格變成下圖:
el-table固定列錯位,踩過的坑,vue.js,前端,javascript,css
可以看到左側一列沒有內容的表格列,可以理解為這是固定的操作列在正常布局的投影,正是它在影響正常布局表格每一行的行高。
el-table固定列錯位,踩過的坑,vue.js,前端,javascript,css
里面雖然看上去沒有內容,實際上還是有三個看不見的按鈕;并且這三個按鈕的布局與固定的操作列有所不同,發(fā)生了換行,導致了第一行的行高變高
el-table固定列錯位,踩過的坑,vue.js,前端,javascript,css
導致這種布局不同的最終原因是因為,投影列里的按鈕有一個margin-left屬性,而操作列則沒有。

問題解決

對于我個人來說,解決方法如下

/deep/.el-button + .el-button {
    margin-left: 0px;
  }

總結

每個人造成錯位的原因可能不同,但是背后的原因都是投影列與固定列的樣式不同導致了實際渲染出來的效果和預想效果出現了偏差,而解決方法都一樣,即統(tǒng)一投影列與固定列的樣式。文章來源地址http://www.zghlxwxcb.cn/news/detail-606823.html

到了這里,關于el-table 固定列錯位的問題的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!

本文來自互聯(lián)網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如若轉載,請注明出處: 如若內容造成侵權/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經查實,立即刪除!

領支付寶紅包贊助服務器費用

相關文章

  • MongoDB踩過的坑

    MongoDB踩過的坑

    目錄 ‘mongodump‘ 不是內部或外部命令,也不是可運行的程序 或批處理文件 備份數據庫 啟動MongoDB服務 可視化工具:MongoDB Compass 由于目標計算機積極拒絕,無法連接 ?BSONObj size: xxxx is invalid. Size must be between 0 and 16793600 (16MB) mongodb默認時沒有mogodump.exe工具和mongorestore.exe工具

    2024年02月16日
    瀏覽(19)
  • el-table組件的el-table-column電腦端使用fixed屬性固定,移動端不使用固定,怎么實現?

    ? ? ? ?要在電腦端使用 fixed 固定列,而在移動端不使用,可以使用 CSS 媒體查詢結合 Vue 的動態(tài)綁定來實現。以下是一個示例代碼: ? ? ? ?在上面的示例中,我們使用 isDesktop 數據屬性來判斷當前設備是否為電腦端。通過監(jiān)聽窗口的 resize 事件,動態(tài)更新 isDesktop 的值。然后

    2024年02月15日
    瀏覽(26)
  • el-table添加固定高度height后高度自適應

    el-table添加固定高度height后高度自適應

    新建目錄src/directive/el-table 在el-table目錄下新建文件adaptive.js 在el-table目錄下新建index.js 在所需使用的vue頁面中引入 import adaptive from ‘…/…/…/src/directive/el-table’ 在main.js中引入 在el-table標簽中添加屬性 v-adaptive:自定義指令,bottomOffset 代表距離底部的距離 height:高度屬性,

    2024年02月08日
    瀏覽(18)
  • 安裝whisper模塊踩過的坑

    安裝whisper模塊踩過的坑

    如果你和我一樣,通過以下命令安裝whisper 但卻出現了 fatal: unable to access \\\'https://github.com/openai/whisper.git/\\\': OpenSSL SSL_read: Connection was reset, errno 10054 那么只需要 在運行 pip install 之前在運行以下的命令,再次重新 pip install ... 即可 原因: 安裝whisper需要先安裝rust環(huán)境依賴。 官方在

    2024年02月15日
    瀏覽(25)
  • 記錄一下postman漢化踩過的坑

    postman安裝后會頻繁的進行更新,每次更新后我們會發(fā)現,postman界面就會回到原來的英文界面。這是由于漢化包的版本和postman的版本不一致導致的。 postman漢化包的更新滯后于postman的更新,如果要成功將postman漢化,就要下載以前的版本保證postman的版本和漢化包的版本一致。

    2024年02月15日
    瀏覽(25)
  • element-ui 表格el-table高度不是一個固定值時固定表頭

    element-ui 表格el-table高度不是一個固定值時固定表頭

    elementui中為表格組件提供了height屬性實現固定表頭 height可以為數字或者字符串,當為一個數字時表示固定的高度,也可以為百分比等字符串。 當height不是一個固定值時,如期望表格可以填充完頁面剩余空間,并且固定表頭時,可以通過給height屬性賦值字符串形式實現。以頁

    2024年01月25日
    瀏覽(109)
  • 關于python的mediapipe庫踩過的坑

    關于python的mediapipe庫踩過的坑

    ??大家好,我是csdn的博主: lqj_本人 這是我的個人博客主頁: lqj_本人的博客_CSDN博客-微信小程序,前端,vue領域博主 lqj_本人擅長微信小程序,前端,vue,等方面的知識 https://blog.csdn.net/lbcyllqj?spm=1000.2115.3001.5343 嗶哩嗶哩歡迎關注: 小淼前端 小淼前端的個人空間_嗶哩嗶哩_bilibil

    2024年01月17日
    瀏覽(26)
  • Spark搭建日志,記錄一些踩過的坑

    Spark搭建日志,記錄一些踩過的坑

    本人在Centos中使用三個虛擬機(node1,node2,node3)搭建hadoop與Spark分布式環(huán)境(具體見后記中的Hadoop安裝),本文記錄一些踩過的坑 解決辦法:sudo chown -R 用戶名 /spark(spark或者hadoop所在目錄) 原理:文件的初始所有者不是用戶名(如root),要把spark目錄的初始所有者更換為自

    2024年03月14日
    瀏覽(20)
  • docker+selenium+firefox | 我踩過的坑

    為了實現SSPUBot不在我電腦上部署,我只能將其制成Docker。 要知道SSPUBot在開發(fā)的時候用了selenium+Firefox的想法開發(fā),所以Docker里面必須要有Firefox,結果這就讓見識到了最頑固的錯誤 selenium.common.exceptions.WebDriverException: Message: Process unexpectedly closed with status 255 我們還是省略我找的

    2024年01月22日
    瀏覽(20)
  • el-table(vue2中)滾動條被固定列蓋住

    el-table(vue2中)滾動條被固定列蓋住

    ??vue2 + el-table ????????1、現場圖片: ???????????????? ????????2、全局css環(huán)境配置了滾動條高度為 6px ????????3、el-table設置滾動條為 15px (比全局高9px) el-table固定列(是根據全局滾動條高度計算,導致覆蓋掉滾動條9px,只顯示6px) 改變el-table固定列的計算

    2024年02月07日
    瀏覽(17)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包,優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包