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>
相关推荐
好好学习O(∩_∩)O2 分钟前
QT6引入QMediaPlaylist类
前端·c++·ffmpeg·前端框架
敲代码的小吉米2 分钟前
前端HTML contenteditable 属性使用指南
前端·html
海尔辛8 分钟前
UGUI Text/TextMeshPro字体组件
ui·unity·性能优化
testleaf13 分钟前
React知识点梳理
前端·react.js·typescript
站在风口的猪110813 分钟前
《前端面试题:HTML5、CSS3、ES6新特性》
前端·css3·html5
Xiao_die88814 分钟前
前端八股之CSS
前端·css
每天都有好果汁吃1 小时前
基于 react-use 的 useIdle:业务场景下的用户空闲检测解决方案
前端·javascript·react.js
穗余1 小时前
NodeJS全栈开发面试题讲解——P10微服务架构(Node.js + 多服务协作)
前端·面试·node.js
横冲直撞de1 小时前
前端下载文件,文件打不开的问题记录
前端
占星安啦1 小时前
一个html实现数据库自定义查询
java·前端·javascript·数据库·动态查询