element-plus实现el-table-column表格平均分配

最新推荐文章于 2025-03-08 05:23:53 发布
最新推荐文章于 2025-03-08 05:23:53 发布
阅读量2.8k 收藏
点赞数 2
文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_46108386/article/details/123455407
版权
本文介绍如何在Element UI的el-table中移除el-table-column的width属性，使其自动平均分配，并探讨了如何设置最小宽度为百分比。还涵盖了el-table-column的min-width属性及其在实际项目中的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.把el-table-column把width属性去掉就自动平均分配

<el-table :data="tableData" border style="width: 100%; margin: 10px">
      <el-table-column prop="num" label="序号"  />
      <el-table-column prop="id" label="名字"  />
      <el-table-column prop="describe" label="描述"  />
      <el-table-column prop="time" label="更新时间"  />
      <el-table-column prop="status" label="状态" >
        <template #default="scope">
          <span v-show="scope.row.status == 1">
            <el-button type="success" round size="small" style="margin-right: 5px"></el-button>启用
          </span>
          <span v-show="scope.row.status == 0">
            <el-button type="danger" round size="small" style="margin-right: 5px"></el-button>禁用
          </span>
        </template>
      </el-table-column>
</el-table>

2.el-table-column使用min-width可以设置百分比,如min-width:'10%' 

顾未眠0125
关注
vue3 - element-plus实现将table表格改为单选效果，将el-table表格实现单选，多选表格变为单选形式（Table多选框改成单选框，表格添加单选框，支持复杂表格嵌套数据多层勾选）
高级前端工程师
03-31 6148
vue3，element plus，表格Table，el-table，复选框改为单选，element-ui 表格控件实现单选功能，把多选框调整为只能单选，如何将el-table多选表格变为单选形式，el-table单选，复选框设置为单选,且可通过选择行选中复选框，elementPlus多选表格变单选，表格多选改为单选,且去除表头的多选框，el-table多选框改为单选框，table多选表格如何实现单选，如何修改ui为圆形单选radio，check复选框多选变为单选，二级嵌套表格带下级如何修改为单选表格，选中
Vue项目中使用element-plus的el-table组件-组件使用-样式修改
JackieDYH的博客
09-18 1174
Vue项目中使用element-plus的el-table组件-组件使用-样式修改。
ElementUI中的el-table解决宽度问题 - 根据内容自动撑开
觉醒法师的专栏
07-03 1万+
在使用element-ui中，会发现表格组件el-table在未指定宽度情况下，会自动计算并给表格宽度赋值。但实际开发中，有时需要根据内容实际长度自动撑开显示，由内容的多少而决定表格的宽度，而不是默认宽度为100%。在默认情况下表格宽度为100%显示，并且列项未指定宽度情况下，剩余部分会平均分配宽度，本案例实际需求是由内容自动撑开显示。componentUpdated
el-table中表格宽度设置
热门推荐
wjs_007的博客
08-01 2万+
大家好，我是小白学编程。最近在工作中遇到一个功能，页面上有表格展示，其实是一个再很简单不过的功能实现了，但是，有时候会遇到尴尬的情况，就是列数量比较尴尬，差不多可以拉伸整屏；差不多会在右侧流出点空白；差不多刚好多出一块，要么出现横向滚动条，要么某一列比较挤。像这种问题，也是很常见的，而且，在不同分辨率或不同放大倍数的电脑上展示时会出现不同的结果。根据自己遇到的情况和处理的方式，总结了一下几种处理方式。
Vue3 + Element Plus 实现表格全选/反选/禁用功能详解
最新发布
misschen888的博客
03-08 837
通过合理运用Element Plus提供的API和Vue3响应式特性，可以构建出功能强大且用户体验良好的表格组件。建议在实际开发中根据具体业务需求灵活调整实现方案。
table 单元格平均分配tr
天蓝蓝风轻轻
03-23 1万+
&lt;style&gt; table{ border-collapse: collapse; border-spacing: 0; table-layout: fixed; } &lt;/style&gt;table 单元格平均分配tr实现上面效果的方法，我们只需要为table指定table-layout: fixed属性即可w3c上对table-layout: fixed属性的说明    au...
Element-plus el-row el-col 五等分七等分九等分
qq_40577885的博客
06-30 6137
而下面这个4 就是有效果的，那么我们就可以从这里的css来入手，直接写一个覆盖的样式就好了，为了避免影响其它使用el-row的组件，我们可以为其添加一个class。因为 el-row 是用 24 来进行划分，当 el-col 的span 使用 24/5 的 4.8来填写时，是不生效的，也就是不支持小数。从上面css代码就可以得出，七等分 则为 100/7 ，九等分则为 100/9。
element-plus下拉框和输入框宽度不一致，:popper-append-to-body=“false“失效
Liberty_yes的博客
03-23 1329
原因控制台看到下拉项的`DOM`元素时插入到`body`里面了，使用`:popper-append-to-body="false"`发现已经废弃，最后发现替换成`:teleported="false"`
vue+element-ui实现表格编辑的三种实现方式
10-17
为了实现行的选中效果，我们可以在`<el-table-column>`中通过`slot-scope`作用域插槽获取到当前行的数据以及索引（`$index`），并据此绑定控制显示隐藏的属性。例如，在点击编辑按钮时，我们可以将对应行的`showEdit...
element-ui表格列金额显示两位小数的方法
10-18
对于Element-UI的表格，我们可以在`el-table-column`的`slot-scope`内使用`scope`对象来访问当前行的数据。例如，如果`payPrice`字段是以分表示的，我们可以这样处理： ```html <el-table-column prop="payPrice" ...
Vue3 - Element Plus表格组件el-table分页勾选数据并导出到Excel电子表格，Table表格跨页选中某行后一键将指定键名数据导出为xls文件，分页多选导出excel表格（纯前端
王二红
09-13 3720
vue3，elementPlus，Table表格，el-table组件，选中特定行导出，vue3+element-plus项目中如何勾选表格数据导出到excel表格，表格数据选中与全选导出，导出的是当前页选中的数据，将分页的表格导出下载，前端导出，导出表格，excel，xls，可导出分页数据，表格跨页勾选后导出xlsx，Vue3表格中导出Excel，如何先勾选表格复选框然后导出，表格下载为xls文档，Vue3实现Excel表格导出，将表格选中的数据导出为excel，分页的表格如何导出来，表格勾选行后再导出x
Element ui Plus把表格table中的每列宽度按照百分比划分
m0_57132217的博客
10-23 566
el-table-column type="index" label="序号" align="center" width="auto" min-width="5%" />这么加就行，所有列的总和最好等于100%，不等的话我看也是有效果的，但是后续有什么影响不确定。
Element-plus el-table自定义表头宽度
qq_47099087的博客
06-27 1207
Element-plus el-table自定义表头宽度
html-table 自动平均分“列宽度”、单元格内容“自动换行”
代码笔记
01-26 9900
style="table-layout: fixed; word-break: break-all; word-wrap: break-word;" <table id="table1" width="100%" border="1" style="table-layout: fixed; word-break: break-all; word-wrap: break-word;"> </table>
table-layout为fixed时，表格长度平均分配的现象解决
hellohehe1122的博客
06-30 1307
对于表格中内容超出长度改变表格长度需要设置如下属性 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 还有 table的属性able-layout：fixed，这会使表格大小不会因为内容变化而变化。 当表格table-layout为fixed时，其表格宽度由第一行决定，若第一行为一整行时，设定表格的宽度成了一个问题，其下的表格都会平均分配，在css中设置的百分比也不会起效，这是用colgroup配合col标签可以解决问题
QTableWidget中实现表格列宽平均分配的两种方法
TechPr的博客
09-07 1322
在上面的代码中，我们同样定义了一个名为set_table_column_width的函数，该函数接受一个QTableWidget对象作为参数。在上面的代码中，我们首先定义了一个名为set_table_column_width的函数，该函数接受一个QTableWidget对象作为参数。QTableWidget的水平表头是由QHeaderView管理的，QHeaderView提供了一个名为setSectionResizeMode的函数，可以设置表头和列的大小调整模式。我们可以利用这个函数来实现列宽的平均分配。
el-descriptions 自定义列数和平分各项的方法，最后一项没有铺满整行
emoji111111的博客
10-27 3655
el-descriptions 自定义列数和平分各项的方法
table格子均匀问题
Cream_Cicilian的博客
04-29 1701
在大多时候，我们希望&lt;table&gt; 展示的格子是均匀的，但是在实际情况下，确实状况百出 例子用宽举例，但高是一样的，只是是在tr里设置height 这是一个普通的table &lt;table border="1" cellspacing="0" style="width: 400px;height: 400px"&gt; &lt;tr&gt; ..
element-plus el-table el-table-column 根据后端返回数据动态生成
03-23
element-plus是一套基于Vue.js的UI组件库，提供了丰富的组件和功能，其中包括了el-table和el-table-column组件。 el-table是element-plus中的表格组件，用于展示数据。它可以根据后端返回的数据动态生成表格内容。你可以通过设置el-table的data属性来绑定后端返回的数据，然后el-table会根据数据自动生成表格的行和列。 el-table-column是el-table中的列组件，用于定义表格的列。你可以通过设置el-table的columns属性来配置表格的列，每个el-table-column代表一列。在el-table-column中，你可以设置prop属性来指定该列对应后端数据的字段名，label属性来设置列的标题，以及其他属性来定义列的样式和行为。 通过使用el-table和el-table-column组件，你可以方便地根据后端返回的数据动态生成表格，并且可以灵活地配置表格的列和样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值