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

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
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 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐