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>
相关推荐
程序员鱼皮1 小时前
什么是 RESTful API?凭什么能流行 20 多年?
前端·后端·程序员
www_stdio1 小时前
让大语言模型拥有“记忆”:多轮对话与 LangChain 实践指南
前端·langchain·llm
inferno1 小时前
JavaScript 基础
开发语言·前端·javascript
cindershade1 小时前
Intersection Observer 的实战方案
前端
青莲8431 小时前
Kotlin Flow 深度探索与实践指南——中部:实战与应用篇
android·前端
cindershade1 小时前
事件委托(Event Delegation)的原理
前端
开发者小天1 小时前
React中useMemo的使用
前端·javascript·react.js
1024肥宅1 小时前
JS复杂去重一定要先排序吗?深度解析与性能对比
前端·javascript·面试
im_AMBER2 小时前
weather-app开发手记 04 AntDesign组件库使用解析 | 项目设计困惑
开发语言·前端·javascript·笔记·学习·react.js
用泥种荷花2 小时前
VueCropper加载OBS图片跨域问题
前端