问题:
使用 Element el-table
组件时,给列 el-table-column
设置百分比%
宽度无效( width="30%"
)
<el-table-column
prop="sort"
label="Sort"
width="10%"
>
原因分析:
el-table
组件会被 vue 解析成 html
,Vue直接把百分号去掉把数值当做列宽来呈现,所以,width
设置百分比的值直接被解析去掉百分号%
变成 px
了。
--- width,min-width 的原理都是将值百分比去掉变成 px。可是 min-width 会按照比例分配剩余空间,并非直接算的百分比。(因此要每一列都设置 min-width 才能实现每一列的百分比配置)设置成 min-width 以后,width 的值就被计算成 (当前值 / 全部列值和)的百分比了。
解决:
<el-table-column
prop="sort"
label="Sort"
min-width="10%"
>