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>
相关推荐
0思必得04 分钟前
[Web自动化] Selenium设置相关执行文件路径
前端·爬虫·python·selenium·自动化
雯0609~14 分钟前
hiprint:实现项目部署与打印1-官网提供普通html版本
前端·html
不绝1911 小时前
UGUI——进阶篇
前端
踏过山河,踏过海1 小时前
【用ui文件做个简单工具的开发,为什么修改完ui后,程序重新编译运行后,GUI界面还是不变呢?】
qt·ui
Exquisite.1 小时前
企业高性能web服务器(4)
运维·服务器·前端·网络·mysql
2501_944525542 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 账户详情页面
android·java·开发语言·前端·javascript·flutter
2601_949857432 小时前
Flutter for OpenHarmony Web开发助手App实战:快捷键参考
前端·flutter
wangdaoyin20102 小时前
若依vue2前后端分离集成flowable
开发语言·前端·javascript
心柠2 小时前
vue3相关知识总结
前端·javascript·vue.js
Amumu121383 小时前
Vue Router(二)
java·前端