element table自适应列宽

已于 2024-04-01 09:46:03 修改
阅读量783 收藏 9
点赞数 9
文章标签： css 前端 javascript
于 2024-03-14 13:42:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52326756/article/details/136708104
版权

需求：el-table通过内容的多少，自动撑开表格宽度
思路：可以通过af-table-column插件来解决

1.安装插件

npm i af-table-column
yarn add af-table-column

2.element table自适应列宽（main.js配置）

import AFTableColumn from 'af-table-column'
Vue.use(AFTableColumn)

3.使用(将el换成af)

<af-table-column prop="proType" label="商品类型" />
愉快的小跳蛙
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件
08-10
基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
12-30
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的： 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 然后直接上template代码：
element中table高度自适应的实现
01-18
1.开发环境 vue+element 2.电脑系统 windows10专业版 3.在开发的过程中,我们经常会使用到 element中的table,但是我们也发现了在table的配置中,只能设置 具体的高度不能设置百分比,怎么实现table高度自适应呢?方法如下: 4.在对应的vue模板中添加如下代码:
拖动table单元格改变列宽或行高
06-22
拖动单元格改变列宽或行高,可以扩展成表格设计器，改变tr 行高 td 列宽
el-table自适应列宽实现
qq_25741071的博客
09-06 2138
给需要自适应列宽的column写一个动态的width。1. 强制表格内容不换行显示。2. 实现表格列宽自适应撑开。别忘记了还得设置CSS。
动态设置el-table操作列的宽度自适应
宁静致远
11-05 1万+
el-table动态操作列宽度自适应设置
elementui的el-table根据列内容长度自适应调整列宽
树上骑个猴的博客
08-06 1万+
应用： <el-table-column prop="paperNumber" :width="flexColumnWidth('paperNumber',viceTableData)" label="单号" align="center" /> 在methods{ }里写声明函数: flexColumnWidth(str,tableData,flag='max') { // str为该列的字段名(传字符串);tableData为该表格的数据
【vue】ElementUI el-table自适应列宽实现
热门推荐
coralime的博客
03-15 4万+
【背景小记】 el-table的el-table-column如果不指定width的话，会自动设定一个宽度，表格内容会自动换行，对强迫症用户来说非常不友好，为了追求完美用户体验，所以这里需要实现两个效果： 1. 强制表格内容不换行显示 2. 实现表格列宽自适应撑开 【代码实现】 <template> <el-table ref="tableRef" v-loading="loading" :data="tableDat
el-table快速实现自适应屏幕
weixin_45598400的博客
04-21 2177
大概找了一下，我觉得这里有两种方法是最快能解决比较急的问题，废话不多说直接干！参考‘多思考多学习’博主的文章。
ElementUI中el-table表格列宽自适应以及封装
最新发布
qickcao的博客
01-29 1417
el-table操作列自适应以及封装]: https://blog.csdn.net/qickcao/article/details/135903339。封装全局参数$getColumnWidth(props,data)的过程以及注册。3、在其他组件中需要自适应宽度的el标签中直接使用即可，使用时传递两个值。关于el-table操作列自适应，请看下面传送门。el-table表格的列宽有自适应宽度，用的的应该都知道有啥缺点吧？老规矩，自己动手、丰衣足食…这个功能我应该怎么说呢？
【el-table的表格宽度自适应】
s_1024的博客
02-02 5350
el-tale组件在表头中只提供了一个width属性来控制表格的宽度，如果将其写死，则会针对过长的内容可能会有溢出换行、针对过短的内容可能会出现占位过多，所以就写了一个js文件来根据字符的长短来返回相应的宽度。
vue Element UI table表格根据内容长度自适应列宽（af-table-column解决）
Chen_chenjiasheng的博客
05-16 4641
🌸 基于 element-ui 组件库的 af-table-column 组件 🌸 支持自适应列宽功能, 使用方法如下： 安装 npm install af-table-column --registry=https://registry.npmmirror.com 引入 // main.js (需要先引入 Vue 和 Element-UI 依赖库, 并在 <el-table></el-table> 组件下使用该组件) import AFTableColumn from '
el-table自适应
weixin_46359814的博客
12-27 2457
实现效果：分页永远贴着浏览器底部，放大和缩小浏览器大小，数据显示增多和减少 1、缩小 2、放大 实现过程： 1、el-table标签内添加ref="sortTable"和:height="sortTableHeight" 2、定义sortTableHeight: 350 <el-table ref="sortTable" :height="sortTableHeight" style="width: 100%;" border :row-style="tableRowC
解决ElementUI中的table表格内容过多，导致行内撑开的问题。
qq_43474235的博客
08-01 6593
解决ElementUI中的table表格内容过多，导致行内撑开的问题。
element UI-table 表格列宽 根据内容自适应
Kerwin__li的博客
03-21 670
可以与 el-table-colum 进行混用 也可以单独进行使用。2、在main.js中引入。
Element UI 表格【列宽自适应】
朝阳39的博客
04-07 1584
<template> <div class="page"> <el-table border style="width: 100%" :data="tableData"> <el-table-column v-for="(item, index) in tableTitleList" :key="index" :label="item.label" :type="item.ty
el-table高度自适应方案（纯CSS、简单、完美）
LETEfly的博客
12-07 2752
通过flex布局，原本预期是让分页组件始终固定在表格底部，但实际上，表格撑满导致分页组件被挤到下面看不见了。解决方案就是在原本flex布局的基础上让el-table的父容器的min-height=0。
ElementUI中el-table表格操作列宽度自适应以及封装成全局变量
qickcao的博客
01-29 2315
如果你的项目中有很多这样的表格都需要动态的设置，可以把这个函数封装成util,然后main中声明为全局方法，以后直接调用即可。对于el-table的操作列，如果不设置width或win-width，当表格列过多时，操作列会被分配的很窄，操作列显示不下的时候会自动换行，当表格列过少时，操作列会被分配很宽，边缘有很大的空隙。3、在其他组件中的更新阶段updated中使用。网上看了几篇文章，拿过来用不生效！封装如下：1、el_table.js。1、设置min-width为动态值。5、如果有需要封装成全局方法。
element ui列宽根据内容自适应
07-25
要使Element UI的列宽根据内容自适应，可以使用`width`属性并将其设置为`auto`。这样，列的宽度将根据内容自动调整。 例如，假设我们有一个表格，其中有两列：姓名和邮箱。我们希望这两列的宽度根据内容自适应。 ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名" width="auto"></el-table-column> <el-table-column prop="email" label="邮箱" width="auto"></el-table-column> </el-table> ``` 在上面的代码中，我们将列的`width`属性设置为`auto`，这样它们将根据内容自适应调整宽度。 请注意，如果内容过长超过了表格宽度，则仍然会发生水平滚动。 希望这个解决方案对您有帮助！如有任何进一步的问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值