Element el-table-column組件列寬度設置百分比無效


問題

使用Element table組件時,給列設置百分比寬度無效(width="30%")

解決

用屬性min-width="3"代替屬性width="30%",且每一列都必須設置

原因

el-table 組件會被 vue 解析成 html, width 設置百分比的值直接被解析去掉百分號變成 px 了。設置成 min-width 之后,width 的值就被計算成 (當前值 / 所有列值和)的百分比了。

解釋

width,min-width 原理都是將值百分比去掉變成px。但是min-width會按照比例分配剩余空間。並不是直接算的百分比。(所以要每一列都設置min-width才能實現每一列的百分比配置)

示例

一行有 5 列:
col1: min-width='1'
col2: min-width='1'
col3: min-width='1'
col4: min-width='1'
col5: min-width='2'

col1: width占1 / 6
col2: width占1 / 6
col3: width占1 / 6
col4: width占1 / 6
col5: width占2 / 6


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM