vue+vuex实现自适应elementUI中table高度

最新推荐文章于 2025-05-07 16:48:52 发布
最新推荐文章于 2025-05-07 16:48:52 发布
阅读量2.4k 收藏 6
点赞数 2
CC 4.0 BY-SA版权
分类专栏： ❤️❤️--vue2核心技术栈 文章标签： vue.js elementui javascript 高度自适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/122415464
本文介绍如何通过vue、element-resize-detector插件和vuex来实现elementUI表格的高度自适应。核心思想是监听父组件div高度，存入vuex并由子组件动态调整表格高度。

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

效果图：

【核心思想】

table高度不写死，实时监听父组件div高度并存入vuex，子组件table监听vuex数据从而高度动态变化。（存入vuex的目的是为了在其他任何组件中可以共享数据，从而实现自适应，也可以复习一下vuex知识）

第一步：首先先安装动态监听一个元素高度的插件 element-resize-detector

该插件之前博客写有（可前往详细查看） vue项目中监听div的宽高变化_蜗牛~~-CSDN博客_vue 监听div宽度

npm install element-resize-detector

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue运用el-table常见问题及案例代码
日常笔记/总结/系列知识梳理
11-30 886
el-table 是 Element UI 的一个组件，用于在 Vue.js 应用程序中创建数据表格。下面是一些常见的 el-table 问题以及相应的案例代码。
element中table高度自适应的实现
01-18
1.开发环境 vue+element 2.电脑系统 windows10专业版 3.在开发的过程中,我们经常会使用到 element中的table,但是我们也发现了在table的配置中,只能设置 具体的高度不能设置百分比,怎么实现table高度自适应呢?方法如下: 4.在对应的vue模板中添加如下代码:
element-ui el-table表格高度自适应
u014197593的博客
12-18 8938
vue包含一些官方指令，比如v-if、v-for、v-html、v-show等等。那如何创建一个属于自己的指令呢？自定义指令有两种，一种是全局的，一种是局部的，我这里只讲解全局的。
ElementUI 表格el-table自适应高度设置
最新发布
weixin_44293690的博客
05-07 1161
ElementUI 表格el-table自适应高度设置
Element UI的表格高度自适应。
weixin_57065954的博客
03-16 3272
在开发后台管理系统的时候，我们的main区域有时会因为表格的高度固定导致不同分辨率情况下展示不同，低分辨率情况下会出现整体竖向滚动条。
vue element table表格高度自适应
qq_40920553的博客
07-21 3135
利用vue自定义指令的方式实现页面对table高度自适应。
elementui表格高度自适应
weixin_44356010的博客
10-14 3958
elementui表格高度自适应 <el-table :data="tableData" style="width: 100%" border :height="heights" ref="refsTable" > </el-table> //根据浏览器高度设置初始高度，并监听浏览器高度变化，改变表格高度，100表示表格距离浏览器的高度 mounted(){ this.$nextTick(() =&
vue+ElementUI实现后台管理系统（二）
sinat_33564062的博客
11-27 1465
一、项目地址 项目链接 Getting started # clone the project git clone https://github.com/PanJiaChen/vue-element-admin.git # enter the project directory cd vue-element-admin # install dependency npm install # d...
前端实战：Vue3+ElementPlus+ECharts实现后台管理系统
qq_22910257的博客
01-07 1727
本次课程带领大家使用Vue3结合ElementPlus，ECharts工具实现后台管理系统页面，包含登录功能，主页布局和导航条功能，客户和保单管理功能，分页展示功能，表单添加功能，报表生成功能等。使用axios调用远程接口，使用Apifox模拟远程接口，使用vuex存储登录信息。
【vue3+tsx实现表格单元格合并】
weixin_40093144的博客
10-14 1195
使用vue3+tsx,实现表格头单元格合并
elementui Table高度自适应
weixin_43787161的博客
11-29 453
【代码】elementui Table高度自适应。
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
Vue 自适应高度表格的实现方法
10-15
主要介绍了Vue 自适应高度表格的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element ui ＜el-table＞表格高度自适应
weixin_56796650的博客
05-10 2746
element ui搭配vue实现表格el-table高度自适应，可以自定义留出的距离
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案；TAdaptivePage 组件新增左右分栏布局）
热门推荐
wocwin的博客
04-24 2万+
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案）
vue，table高度自适应
小白的博客
07-02 3210
<el-table 2 :data="tableData" 3 :height="tableHeight" 5 style="width: 100%"> data() { 2 return { 3 tableHeight: window.innerHeight - 200, 4　　} 5 }
vue vue的table表格自适应_Vue 自适应高度表格
weixin_39806818的博客
12-18 923
前言示例版本为 Element-ui 2.13.1 + Vue 2.6.11本人是做后台开发的，由于公司业务要求需要将前后台模块进行分离，两年前选择使用 vue-element-admin 项目进行前台的开发，该框架集成了很多功能，特别适合对 Vue 很陌生的新手，公司项目组成员接受程度普遍较高。在使用过程中 表格 是必不可少的一个控件，用于展示数据，单页数据量过多就会导致浏览器自动生成右侧滚动条...
vue Element-ui表格高度自适应
ZJ15981837003的博客
09-14 773
1： 新建包名 src/directive/el-table ，创建 adaptive.js // 设置表格高度 const doResize = async (el, binding, vnode) => { // 获取表格Dom对象 const { componentInstance: $table } = await vnode // 获取调用传递过来的数据 const { value } = binding if (!$table.height)
Vue+Element-UI根据浏览器大小动态设置el-table的高度，实现自适应
ARUNNE的博客
04-29 4010
一、页面渲染 <template> <div class="app-container"> <div style="background-color:green;padding:20px;margin-bottom:30px"> <el-table :data="table1_info.tableData11" style="width: 100%;" border :heigh
前端 Vue、Axios、ElementUI、Vue-Router、Vuex、ECharts 后端 Spring Boot、Jwt、MyBatis-Plus、MySQL、Hutool、Spring Security、Redis、Activiti 这个技术栈我要创建一个新的页面怎能创建
03-19
前端部分，Vue、Vue-Router、Vuex、Axios、ElementUI和ECharts，这些都是构建单页面应用的关键。创建新页面通常涉及创建Vue组件，配置路由，可能的状态管理，以及使用UI组件库和图表库。后端部分，Spring Boot作为...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suoh's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值