Element el-table-column组件列宽度设置百分比无…

2019-11-19 16:07:18来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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


原文链接:https://www.cnblogs.com/itzlg/p/11891822.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:算法源于生活,算法服务于生活---在力扣的成长(一)

下一篇:十大经典排序算法