elementUI el-table高度heght和总结summary 同时使用 表格样式异常

已于 2024-06-06 09:51:38 修改
阅读量352 收藏 3
点赞数 10
分类专栏： 前端 文章标签： elementui 前端 javascript
于 2024-06-06 09:51:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40603125/article/details/139489313
版权

背景

同时使用height和 show-summary

在这里插入图片描述

样式错位

在这里插入图片描述

解决方案

  • 在钩子函数updated 中重新渲染此表格
<el-table :height="autoHeight" show-summary ref="dataTable" >

  updated() {
    this.$nextTick(() =>{
      this.$refs.dataTable.doLayout();
    })
  },

更改后的效果

在这里插入图片描述

参考链接

https://blog.csdn.net/gradonisis/article/details/110420980

当归1024
关注
  • 10
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS中UIScrollerView的用法及基于AotoLayout的控件悬停
01-05
还有一个UIWebView，尽管那不是UIScrollView的直接子类，它适用UIScrollView去显示网页内容contentsize是内容的宽和高，contentsize.width是内容的宽度，contentsize.heght是高度，contentsize是UIScrollView的一个...
HTML5+JS实现俄罗斯方块原理及具体步骤
12-13
游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形,每个矩形width为10单位，heght为6个单位(canvas 的绝对单位是固定的，非像素)。 创建RusBlock类包含相应的数据和行为，创建二维数组aState[21][25]记录...
6.在使用elementui的表格，需要合计时:summary-method 和 show-summary存在，并设置在指定高度，出现显示不完全或者显示不出来
qq_46090071的博客
06-01 1973
1
el-table表单增加show-summary表尾合计，表格错位和高度计算错误
weixin_43968658的博客
10-23 4171
Element-UI的el-table表单增加show-summary表尾合计后，表单的正文会出现计算高度错误，不会减除合计行的高度，所以需要自定义下表单正文高度。 tips#每次获取表单数据后执行 //表单总高度 let tableHeight = document.getElementsByClassName('el-table')[0].offsetHeight //表头高度 let hea...
vue设置列表高度自适应和show-summary的冲突
weixin_44006009的博客
01-07 927
vue设置列表高度自适应和show-summary的冲突
el-table列表合计及不显示问题，以及树形teble
m0_73202019的博客
03-28 585
组件在设置表格高度heoght 同时 开启合计行show-summary ，项目中合计这一列不显示，但是缩放下页面或者稍微修改下F12里dom中的东西就又显示了。方法二：添加updated生命周期 对Table重新布局。方法一：修改el-table样式。问题：Element的。
【elementUi】el-table设置高度之后合计行不显示解决方法
叫我恶魔
05-11 2805
问题： Element 的 el-table组件在同时设置了表格的高度height以及合计行show-summary，这导致合计行无法正常显示。 解决方法： 根据文档提供的方法，添加updated生命周期，对Table重新布局后得到解决 <template> <el-table ref="table" :height="500" :data="dataSource" show-summary /> </template> <scrip
el-table最全修改滚动条及背景文字颜色，不高亮
Koreyoshi123654的博客
02-15 2804
el-table最全修改滚动条及背景文字颜色，不高亮
解决element中show-summary合计与高度合用无效问题
gradonisis的博客
12-01 1574
解决element中show-summary合计与高度合用无效问题 当合计与固定高度一起用时会出现合计不显示问题， 解决方法： 首先在 table内加上一个 ref=‘table’ 再加入一个在vue的生命周期updated 就可以了
element table 使用了表格固定height高度和表格属性fixed属性出现了高度错乱bug
程小博衍的博客
04-11 441
【代码】element table 使用了表格固定height高度和表格属性fixed属性出现了高度错乱bug。
带音效的VC++俄罗斯方块游戏源码
04-27
带音效的VC++俄罗斯方块游戏源码，游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形,每个矩形width为10单位，heght为6个单位(canvas 的绝对单位是固定的，非像素)。 创建RusBlock类包含相应的数据和行为...
ElementUI中的el-table解决宽度问题 - 根据内容自动撑开
觉醒法师的专栏
07-03 861
在使用element-ui中，会发现表格组件el-table在未指定宽度情况下，会自动计算并给表格宽度赋值。但实际开发中，有时需要根据内容实际长度自动撑开显示，由内容的多少而决定表格的宽度，而不是默认宽度为100%。在默认情况下表格宽度为100%显示，并且列项未指定宽度情况下，剩余部分会平均分配宽度，本案例实际需求是由内容自动撑开显示。componentUpdated
Vue3+Element-plus的表单重置
weixin_49352307的博客
07-04 268
1.创建表单,绑定表单数据对象model,并且每一表单需要绑定prop。作用:简化代码,重置表单数据。
表单代码示例
最新发布
温暖前端的博客
07-07 593
<template> <el-form ref="form" :model="formData" :rules="formRules" label-width="100px"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form
el-date-picker 开始时间选定后，结束时间不可选择开始时间之前的日期
Ann_52547的博客
07-04 175
【代码】el-date-picker 开始时间选定后，结束时间不可选择开始时间之前的日期。
java版本工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统
m0_65038841的博客
07-03 643
二、企业通过数字化转型，不仅有利于优化业务流程、提升经营管理能力和风险控制能力，还可强有力地促进企业体制机制的全面创新。四、在企业里建立一个管过程、提效率、降风险、控成本的工程项目管理环境，科学化、规范化是至关重要的。1、项目列表：实现对项目列表的增删改查操作，包括查看各项目的立项人、创建时间、2、项目计划管理：项目计划查看和管理模块，可执行增删改查操作，包括查看甘特图。3、收支报表：项目收支报表，包含总体收支、项目收支和收支统计模块。1、项目汇总：项目汇总信息查看，包括进度、计划时间等信息。
使用ElementUI组件库
有趣的灵魂万里挑一,好看的皮囊你又没有
07-02 385
1.安装插件2.引入组件库3.引入全部样式4.使用5.在官网寻找所需样式我这里以button为例6.在组件中使用。
基于java语言+ Vue+ElementUI+ MySQL8.0.36数字化产科管理平台源码，妇幼信息化整体解决方案
zmm201453的博客
07-04 941
基于java语言+ Vue+ElementUI+ MySQL8.0.36数字化产科管理平台源码，妇幼信息化整体解决方案；数字化产科管理系统在提高工作效率、提升孕产妇就医体验、实现数据互融互通与区域共享、高危预警与智能化管理以及经济效益与社会效益等方面具有显著优势。这些优势共同推动了产科医疗服务的现代化、智能化和人性化发展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值