Element UI 设置 el-table-column 宽度width为百分比无效的问题解决方案
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
问题:
使用 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%"
>




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:20 天前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
更多推荐
所有评论(0)