问题:elementUI el-table 设置了高度height 和合计行 show-summary 之后,合计行无法正常显示

一、问题分析

  根据调试,发现该问题应该属于组件bug,表格主体中给 footer留的高度不够导致,重新设置即可。

二、解决方法

  添加生命周期钩子 updated ,对 table 组件重新布局即可解决问题。具体如下:

  

    <el-table
show-summary
border
ref="table"
:data="dataList"
:height="tableHeight"
:summary-method="getSummaries"
>

  

updated() {
this.$nextTick(() => {
this.$refs.table.doLayout()
})
}

以上,问题即可解决

 

解决elementUI 表格el-table设置高度之后合计行不显示的更多相关文章

  1. NC nc5.x报表设置合计行是否显示

    首先要先继承UI类 /** * 设置合计行是否显示 */ public TotalsReportUI() { super(); getReportBase().getBodyPanel().setTo ...

  2. vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条

    相信有很多小伙伴遇到过这个问题,首先还是来看图片,筛选框我做了处理,所以和官网的有点小差别 官方网站和个人网站对比图如下: 代码如下:(F12找到该元素的class,设置高度) .el-table-f ...

  3. 解决element-ui表格表头内容太长时的换行问题

    在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...

  4. 解决element-ui表格字段用expand展开行时其他字段也会同时展开的问题

    使用element-ui的table表格时,我们通常会在需要展开的列上通过设置 type="expand" 和 Scoped slot 可以开启展开行功能,但是渲染结果会出现其他未 ...

  5. 解决element-ui表格多重嵌套循环时,添加row-key="id" 出现Duplicate keys detected: 'XXX' 错误的问题

    Duplicate keys detected: 'XXX' 错误,怀疑是多重嵌套循环时 :key="item.id或index" 不能重复的问题,但设置了不同的 key 后并未解 ...

  6. div没有设置高度时背景颜色不显示(浮动)

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. ...

  7. 解决 asp.net 伪静态 IIS设置后 直正HTML无法显示的问题

    asp.net+UrlRewriter来实现网站伪静态,实现伪静态有一些好处,比如对于搜索引擎更好收录页面,还有一个好处就是隐藏了真实地址的参数,所以有独立服务器的朋友,配置IIS实现伪静态功能,挺不 ...

  8. HTML+css基础 表格标签table Table标签属性 td标签属性

    表格标签table:   他是由行与列构成,最小单位是单元格. 行标签  <tr></tr> 单元格标签<td></td> Table标签属性: Bor ...

  9. 解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

  10. 关于html中table表格tr,td的高度和宽度

    关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...

随机推荐

  1. 搜索Python编程获取相关图书信息

    1.获取相关图书信息 #搜索"Python编程"获取相关图书信息 from selenium import webdriver from selenium.webdriver.su ...

  2. openStack核心组件的工作流程

    目录 openStack核心组件的工作流程 1. Keystone 1.1 User 1.2 Credentials 1.3 Authentication 1.4 Token 1.5 Project ...

  3. webpack性能优化方式之dll--- webpack.dll.config.js

    通常来说,我们的代码都可以至少简单区分成业务代码和第三方库.如果不做处理,每次构建时都需要把所有的代码重新构建一次,耗费大量的时间.然后大部分情况下,很多第三方库的代码并不会发生变更(除非是版本升级) ...

  4. oeasy教您玩转vim - 86 - # 外部命令external Command

    ​ 外部命令 external 回忆 上次研究的是global :[range]global/{pattern}/{command} range 是执行的范围 pattern 是搜索的模式 comma ...

  5. 彻底搞懂python super函数的作用

    super() 的入门使用 在类的继承中,如果重定义某个方法,该方法会覆盖父类的同名方法,但有时,我们希望能同时实现父类的功能,这时,我们就需要调用父类的方法了. 调用父类同名方法有两种方式: 1.调 ...

  6. go 环境搭建

    下载go 编辑器 https://www.jetbrains.com.cn/go/ 激活工具可以留言,我看到就回复.(保存在阿里云盘) 编辑器配置 GOPROXY=https://goproxy.cn ...

  7. PixiJS源码分析系列:第三章 使用 canvas 作为渲染器

    使用 canvasRenderer 渲染 上一章分析了一下 Sprite 在默认 webgl 渲染器上的渲染,这章让我们把目光聚集到 canvasRenderer 上 使用 canvas 渲染器渲染图 ...

  8. Hbaseshell命令中的一些语法

    help 'xx' 看库list_namespace 看表list 建表create 't1','f1' 写数据put 't1','r1','c1:name','value' 读数据一行get 't1 ...

  9. 【DataBase】MySQL 05 基础查询

    MySQL数据库 05 基础查询 视频参考自:P18 - P27 https://www.bilibili.com/video/BV1xW411u7ax 配套的SQL脚本:https://shimo. ...

  10. 【DataBase】SQL50 Training 50题训练

    原文地址: https://blog.csdn.net/xiushuiguande/article/details/79476964 实验数据 CREATE DATABASE IF NOT EXIST ...