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>
相关推荐
q***7484 分钟前
私有化部署DeepSeek并SpringBoot集成使用(附UI界面使用教程-支持语音、图片)
spring boot·后端·ui
joker学java6 分钟前
el表达式jstl和我们的js都是什么时候使用
前端
晴殇i7 分钟前
前端极速性能优化:从加载到渲染的全链路实战指南
前端·javascript
joker学java7 分钟前
el,js,jstl什么时候进行混用
前端
AAA阿giao8 分钟前
JavaScript 深拷贝全解析:从栈与堆内存机制到安全对象复制实践
前端·javascript·json
Keya9 分钟前
鸿蒙Next系统手机使用Charles配置证书并抓包教程
前端·harmonyos
Vhen10 分钟前
Vue2项目部署后更新版本提示
前端
搞个锤子哟12 分钟前
vue移动端开发长按对话复制功能
前端
AAA阿giao13 分钟前
深入理解 JavaScript 的 Array.prototype.map() 方法及其经典陷阱:从原理到面试实战
前端·javascript·面试
excel1 小时前
HBuilderX 配置 adb.exe + 模拟器端口一体化完整指南
前端