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>
相关推荐
谭光志6 小时前
Vibe Coding 时代,程序员该何去何从
前端·后端·ai编程
仿生狮子8 小时前
别再说“全栈”了,AI 时代团队只认这 5 种人
前端·人工智能·后端
kyriewen8 小时前
AI 写的 React 组件,合并前必查的 6 个坏味道——每个都有代码对比
前端·javascript·react.js
Highcharts.js8 小时前
软件开发公司为什么选择 Highcharts?
前端·前端框架·echarts·数据可视化·技术选型·highcharts·图表工具
阿祖zu8 小时前
企业 AI 转型之痛,个人提效十倍不止,组织效率仍止步不前?
前端·aigc·agent
摇滚侠10 小时前
SpringBoot3+Vue3 全套视频教程 45-51
前端·javascript·vue.js
酸梅果茶10 小时前
【6】lightning_lm项目-LIO 前端 -点云预处理模块
前端·slam
Hilaku10 小时前
前端大裁员背后的恐慌:我们还剩什么底牌?
前端·javascript·程序员
咖啡无伴侣11 小时前
unplugin-auto-import 使用详解+面试高频考点
前端·架构
搬砖记录员11 小时前
录屏文件打不开?H.265兼容性踩坑与4种实战方案
前端