Element UI 设置 el-table-column 宽度 width 为百分比无效

问题描述: 想要每列宽度不同,不想使用 px 固定值,将 width 设置成百分比,但是每一列还是很窄

原因: el-table 组件会被 vue 解析成 html,vue 直接把百分号去掉把数值当做列宽来呈现,所以,width 设置百分比的值直接被解析去掉百分号% 变成 px 了

解决方案: 使用 min-width 代替 width

需要注意的是:width,min-width 的原理都是将值百分比去掉变成 px,可是 min-width 会按照比例分配剩余空间,并非直接算的百分比。因此要每一列都设置 min-width 才能实现每一列的百分比配置,设置成 min-width 以后,width 的值就被计算成 (当前值 / 全部列值和)的百分比了

复制代码
<el-table v-loading="loading" :data="tableData">
    <el-table-column prop="id" label="ID" min-width="6%"></el-table-column>
    <el-table-column prop="name" label="姓名" min-width="12%"></el-table-column>
    <el-table-column prop="create_time" label="创建时间" min-width="24%"></el-table-column>
    <el-table-column prop="update_time" label="更新时间" min-width="24%"></el-table-column>
</el-table>
相关推荐
Baklib梅梅16 小时前
2025文档管理软件推荐:效率、安全与协作全解析
前端·ruby on rails·前端框架·ruby
卷Java16 小时前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
FogLetter16 小时前
前端性能救星:虚拟列表原理与实现,让你的10万条数据流畅如丝!
前端·性能优化
我是天龙_绍16 小时前
前端驼峰,后端下划线,问:如何统一?
前端
知识分享小能手16 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
code_YuJun16 小时前
nginx 配置相关
前端·nginx
对不起初见18 小时前
PlantUML 完整教程:从入门到精通
前端·后端
东方掌管牛马的神18 小时前
oh-my-zsh 配置与使用技巧
前端
你的人类朋友18 小时前
HTTP请求结合HMAC增加安全性
前端·后端·安全