el-table自适应方式

最新推荐文章于 2024-05-21 21:48:32 发布
最新推荐文章于 2024-05-21 21:48:32 发布
阅读量1.5k 收藏 1
点赞数 2
分类专栏： 前端问题 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/drawlessonsfrom/article/details/117994181
版权

el-table的简介

el-table是elementui中的一个相关的表格样式，在这个相关的表格样式中可以为每一列定义相关的宽度。

当将el-table中每一列表格宽度写死出现的问题

当将el-table中的每一列宽度写死时，当缩小浏览器的大小时，表格布局容易错乱。

解决方式

自适应定义el-table的宽度，表格中相关每一列的宽度不写死，只写其中几列或者均不写死，这样相关的宽度都是自适应的。当缩小浏览器的大小时，表格的大小不容易发生错乱。

好事总会发生在下个转弯
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-table快速实现自适应屏幕
weixin_45598400的博客
04-21 2297
大概找了一下，我觉得这里有两种方法是最快能解决比较急的问题，废话不多说直接干！参考‘多思考多学习’博主的文章。
【热】如何实现el-table列宽随内容长度自适应最小宽度
STATICHIT静砸的博客
12-12 3323
非常火急火燎的来写这篇博客！！因为自己一开始想实现这个效果时在网上查了很久查了很多资料和博客都没有找到能有效达到效果的方法，要么就是别人说有效但是我这里会报错而且难以解决。最后终于被我自己给摸索出来了！
封装el-table并实现前端动态显隐列及操作列宽度自适应
最新发布
m0_48521482的博客
05-21 1318
对el-table进行简单封装，实现前端动态显隐列及操作列宽度自适应。在写前也参考过很多人的代码，但是很多都要额外传递参数，或者将数据组建成特定格式，很不方便；因此我此次封装希望少进行一些额外配置，力图还原el-table的用法
el-table高度自适应方案（纯CSS、简单、完美）
LETEfly的博客
12-07 3958
通过flex布局，原本预期是让分页组件始终固定在表格底部，但实际上，表格撑满导致分页组件被挤到下面看不见了。解决方案就是在原本flex布局的基础上让el-table的父容器的min-height=0。
el-table列表自适应页面高度
qq_43209807的博客
10-14 2299
所以想到了用el-table的max-height属性去实现。不想用混入，所以使用了组件的方式来实现。最近产品经理提了一个需求，当表格超出页面高度时，要固定顶部表头和搜索栏。
elementui表格没有撑满外层容器，中间有列空白
NOyesNONO_的博客
05-30 2979
场景再现 代码 所有el-table-column都给了固定的width，但从页面上来看，整个table的宽度要大于所有列的宽度，而右侧的操作列给了固定fixed="right"使中间多出来了空白列。 比如：一共有5列，每一列都给了固定宽100px，总和宽为500px，而页面上table的宽未700px，这样就会产生200px的空白。 解决方法 留一列 ...
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
改变el-table宽度
12-12
`:width`的值来自`tableColumn`对象，通过`tableColumn['tab-table-1'][索引]`获取，这里的`'tab-table-1'`是表格ID，索引对应于`el-table-column`在`tableColumn`数组中的位置。 在`mounted`生命周期钩子中，`...
基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件
08-10
本项目"基于ElementUI二次封装的支持自适应列宽的table-column列组件"正是针对Element-UI的table组件进行了一次深度定制，以解决在数据展示过程中列宽自动适应的问题。 Element-UI的table组件在默认情况下，列宽...
【JavaScript源代码】el-table表头根据内容自适应完美解决表头错位和固定列错位.docx
12-28
总结来说，这个解决方案通过自定义Vue指令实现了`el-table`的列宽自适应，根据单元格内容动态计算宽度，有效地解决了表头错位和固定列错位的问题。使用时只需在`el-table`标签上添加`v-tableFit`指令，即可自动调整...
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为该表格的数据
element-ui中el-table根据浏览器的缩放自适应宽度
邱先生的博客
10-21 1万+
最近有个pc端的项目，要求浏览器缩放的时候可以自适应宽度，但在使用element-ui中的el-table出现了点小问题，table-header、table-body的宽度是js动态计算的固定宽度 在网上找了一些办法、包裹一层父元素并添加position:relative,子元素添加position:absolute;width:100%,亲测是可以达到自适应的效果的. 但是！如果在table下面还需要编写页面，由于table的绝对定位，样式会乱. 其实也简单，动态计算table的高度并赋值给父元素撑起
vue3 设置el-table 高度自适应（2种方案）
会点php的前端小渣渣
01-04 6716
【代码】vue3 设置el-table 高度自适应。
elementui中table实现根据缩放自适应页面
weixin_44116344的博客
03-05 1632
1直接在el-table标签中设置max-heigh:calc(100vh - px) 注意括号里面的空格。(2) 利用计算属性进行动态改变。2使用动态样式进行设置。
Vue 使用el-table实现自适应列宽
weixin_42164004的博客
04-30 1万+
主要思路：每次获取分页表格数据时动态计算每列列宽 我的需求是能实现自适应，且不出现横向滚动条，所以计算出来每列列宽后，把所有列宽加起来，得到total，然后用每列列宽除以total,就能得到每列列宽的长度百分比，比如用width=10%的方式去设置每列宽度，如果想展示完全每列内容，不介意出现横向滚动条，就直接用计算出来的列宽作为列的宽度就可以了，比如width=100 以下是计算列宽的主要方法 后台返回给我的数据格式就是这样的，field0代表第一列，field1代表第二列，以此类推… 主要方法如下
el-table表格组件高度自适应通用方式
weixin_50227498的博客
06-15 1636
关于表格自适应有很多方案，一般逻辑都是获取窗口高度减去其他元素来实现。 尝试了很多，不管是普通场景还是，上下元素高度动态情况，都能很好的兼容。
el-table实现表头列宽自适应（即表头文本不换行）
Liz's blog hut.
06-17 1万+
前情提要 leader提出，希望表头文本能够将列宽适应内容宽度变长，而非换行显示。接收到需求，首先去element官网查看文档看有没有相关属性可以设置。经查验，fit属性的说明是“列的宽度是否自撑开”，我一想，这个描述跟我的需求挺像的呀，但仔细一看，这个属性默认就是true，也就是说这个属性本就打开了，但表现出来的效果和我们想要的不一样。这个属性应该是指，在所有列宽加起来<表格宽度时，列宽是否撑开以填满表格宽度。效果如下图： fit=“true” fit=“false” 没有发现element有提
ElementUI 实现el-table 列宽自适应
shykevin的博客
05-06 2万+
一、概述 Element UI 是 PC 端比较流行的 Vue.js UI 框架，它的组件库基本能满足大部分常见的业务需求。但有时候会有一些定制性比较高的需求，组件本身可能没办法满足。最近在项目里就碰到了。 很多页面都需要用到表格组件el-table。如果没有给el-table-column指定宽度，默认情况下会平均分配给剩余的列。在列数比较多的情况，如果el-table宽度限定在容器内，单元格...
Element UI的表格table列的宽度自适应设置
热门推荐
腾讯全栈-ITCJF
03-23 9万+
不要设置 width="110px" <el-table-column prop="login_id" align="center" label="工号"> </el-table-column> <el-table-column prop="login_id" width="110px" align="center" label="工号...
el-table自适应高度
09-16
要实现el-table的自适应高度，可以按照以下步骤进行操作： 1. 在el-table中动态绑定一个高度，并在data中声明tableHeight。 ```html <el-table ref="multipleTable" :data="tablist" style="width: 100%" v-if="tableHeight" :height="tableHeight"></el-table> ``` ```javascript data() { return { tableHeight: "",//表格高度 } } ``` 2. 声明一个方法来计算el-table的高度。 ```javascript methods: { //计算table高度(动态设置table高度) getTableHeight() { let tableH = 210; //距离页面下方的高度 let tableHeightDetil = window.innerHeight - tableH; if (tableHeightDetil <= 300) { this.tableHeight = 300; } else { this.tableHeight = window.innerHeight - tableH; } }, } ``` 3. 在mounted钩子函数中，通过计算窗口高度、表格距离顶部距离和需求高度来设置tableHeight，并更新表格防止内容变化引起异常情况。同时，监听窗口大小变化，实时更新tableHeight。 ```javascript mounted() { let that = this; this.$nextTick(() => { this.tableHeight = window.innerHeight - this.$refs.table_e.$el.offsetTop - 200; //窗口高度-表格距离顶部距离-需求高度 this.$refs.table_e.doLayout(); //更新表格防止表格内容变化表格异常情况 //监听窗口大小变化 window.onresize = function() { that.tableHeight = window.innerHeight - that.$refs.table_e.$el.offsetTop - 200; that.$refs.table_e.doLayout(); }; }); }, ``` 以上就是实现el-table自适应高度的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值