elementui中table实现根据缩放自适应页面

最新推荐文章于 2023-09-19 12:30:00 发布

毫发不爽

最新推荐文章于 2023-09-19 12:30:00 发布

阅读量1.6k

点赞数 1

文章标签： elementui javascript vue.js

本文链接：https://blog.csdn.net/weixin_44116344/article/details/129351122

版权

1直接在el-table标签中设置max-heigh:calc(100vh - px) 注意括号里面的空格

2使用动态样式进行设置

(1) <el-table :style="{height}" border style="width: 100%">

(2) 利用计算属性进行动态改变

computed:{

height() {

return {

height: window.screen.availHeight

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

毫发不爽

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
elementui中table实现根据缩放自适应页面

1直接在el-table标签中设置max-heigh:calc(100vh - px) 注意括号里面的空格。(2) 利用计算属性进行动态改变。2使用动态样式进行设置。
复制链接

扫一扫

VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

12-30

在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的：只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。然后直接上template代码：

基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件

08-10

本项目"基于ElementUI二次封装的支持自适应列宽的table-column列组件"正是针对Element-UI的table组件进行了一次深度定制，以解决在数据展示过程中列宽自动适应的问题。 Element-UI的table组件在默认情况下，列宽...

参与评论您还未登录，请先登录后发表或查看评论

element-ui中el-table根据浏览器的缩放自适应表头宽度和内容展示

qq_38803953的博客

08-11

3220

etable 设置了heigh或者max-height之后在最开始的界面可以正常滑动看到内容，但是f12或者第一次缩放屏慕的时候他内容最底部不会全部展示有一部分会被遮住，后面在e-table-column添加了fixed="right”虽然解决内容的问题，但是一样f12或者第一次屏幕的时候他的标题head就出问题了如果文字过长，高度不能适应内容会被遮住、继续施拉屏幕宽度的时候前面两个都恢复正常了。2.css设置这个给他强行设置自适应就可以第一次修改屏幕宽度的时候达到内容自适应了。

el-table如何实现自动缩放，提示隐藏内容

热门推荐

邱先生的博客

10-21

1万+

最近有个pc端的项目，要求浏览器缩放的时候可以自适应宽度，但在使用element-ui中的el-table出现了点小问题，table-header、table-body的宽度是js动态计算的固定宽度在网上找了一些办法、包裹一层父元素并添加position:relative,子元素添加position:absolute;width:100%,亲测是可以达到自适应的效果的. 但是！如果在table下面还需要编写页面，由于table的绝对定位，样式会乱. 其实也简单，动态计算table的高度并赋值给父元素撑起

vue+elementUI组件table实现前端分页功能

10-15

分页处理是通过`tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)`实现的，它根据当前页码`currentPage`和每页大小`pageSize`来截取表格数据。`el-pagination`组件则提供了分页功能，它的`:current...

elementUI中Table表格问题的解决方法

12-12

前言 element ui是一个非常不错的vue的UI框架，element对table进行了封装，简化了vue对表格的渲染。在开发vue框架项目时，引入...打开调试之后，发现table的宽度并没有按照100%来显示，而是根据表格宽度值来计算的（我

el-table快速实现自适应屏幕

weixin_45598400的博客

04-21

2293

大概找了一下，我觉得这里有两种方法是最快能解决比较急的问题，废话不多说直接干！参考‘多思考多学习’博主的文章。

table 根据窗口缩放，自适应

Passerby_K的博客

08-14

760

table 根据窗口缩放，自适应缩放

页面放大缩小时，el-table高度随之变化

guapilixianghe的博客

10-08

1142

【代码】页面放大缩小时，el-table高度随之变化。

Element ui中Table给单元格加缩进圆角效果

galaxyJING的博客

02-16

978

【代码】Element ui中Table给单元格加缩进圆角效果。

vue使用element-ui中的el-table实现宽高边框拖拽缩放大小

weixin_46166949的博客

07-21

5167

效果图： 1.需要使用vue的一个插件vue-draggable-resizable 以下是该组件的官网文档：点击跳转在控制台下载组件： npm install --save vue-draggable-resizable 或者 cnpm install --save vue-draggable-resizable 2.然后在vue脚手架中对插件进行挂载打开src下的main.js，位置如下图所示：代码如下： import VueDraggableResizable from 'vue-dr

大屏自适应问题解决（element表格自适应，Echarts大小自适应）

jl____的博客

02-17

1295

大屏问题

elementUI中的el-table表头和内容全部一行显示完整

GhostPaints的博客

03-23

5080

使用el-table实现表头不换行无滚动条无缩略，表格内容不换行不缩略一行显示

vue监听浏览器窗口的变化，随着窗口变化调整里面table的宽高

qq_39355295的博客

03-04

2260

在开发中经常可以遇到在不同的浏览器中，加载的图形与自己预期的不同table在手机端中显示滚动框正常，但是当切换到ipad端时，由于height没有随着浏览器的变化而动态变化，就导致表格的滚动框也是不变的，这样就会使得加载的效果不好。下面是我在网上搜索的解决方法：此办法适用于vue开发的项目，在data中设置： 1 tableHeight:"500", 2 screenHeight:window...

el-table列宽自适应

weixin_55552928的博客

12-29

4524

table 列宽自适应 不换行

vue el-table 表格宽度无法缩小自适应

u013992330的博客

01-26

5036

element 内部的table宽度是根据父级元素来计算的。当父元素是flex布局时，嵌套的子元素会有一个是固定的宽度。在浏览器拉升的过程中，父元素首先被拉升，因此嵌套的子元素也可以跟着拉升，但是当浏览器缩小时，由于父元素被子元素撑着，无法缩小，而子元素在父元素没有缩小的情况下也不会缩小，这就出现了父、子元素相互依赖的情况，从而导致table无法随着浏览器的缩小而自动缩小。解决办法：给table的父元素设定相对定位，给table设定绝对定位，例...

vue2.0 elementui2.0表格el-table自适应高度的实现方法

05-01

在Vue2.0和ElementUI2.0中使用el-table表格组件时，自适应高度可以通过以下步骤来实现： 1. 确定数据源首先，我们需要确定用于填充表格的数据源。在el-table中，数据通常以数组的形式传递，其中每个数组元素代表表格中的一行数据。 2. 计算表格高度在Vue中，我们可以使用计算属性来动态计算表格的高度。计算属性会根据数据源的变化自动更新表格高度。例如，我们可以使用下面的代码来计算表格高度： computed: { tableHeight: function() { // 获取窗口可见区域高度 var viewportHeight = window.innerHeight; // 计算表格头和分页组件的高度 var tableHeaderHeight = this.$refs.table.$el.querySelector('.el-table__header-wrapper').offsetHeight; var paginationHeight = this.$refs.pagination.$el.offsetHeight; // 计算表格内容区域的高度 var contentHeight = viewportHeight - tableHeaderHeight - paginationHeight - 20; return contentHeight; } } 在上面的代码中，我们首先获取窗口可见区域的高度，然后根据表格头和分页组件的高度计算表格内容区域的高度。最后，将计算出的高度返回。 3. 绑定表格高度我们将计算属性中计算出的表格高度绑定到el-table组件中的height属性上，以实现自适应高度。例如，我们可以使用下面的代码将表格高度绑定到el-table组件上： <el-table :data="tableData" ref="table" :height="tableHeight"> 在上面的代码中，我们首先使用data属性传递数据源，然后使用ref属性给el-table组件添加一个引用，最后使用height属性将计算属性中计算出的表格高度绑定到组件上。通过上述方法，我们可以在Vue2.0和ElementUI2.0中实现自适应高度的el-table表格组件。