首页 > 其他分享 >解决elementUI 表格el-table设置高度之后合计行不显示

解决elementUI 表格el-table设置高度之后合计行不显示

时间:2023-03-07 10:14:32浏览次数:36  
标签:el 表格 elementUI 设置 table 合计

 

问题: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()
    })
}

 

以上,问题即可解决

    

标签:el,表格,elementUI,设置,table,合计
From: https://www.cnblogs.com/BillyYoung/p/17187064.html

相关文章

  • shell脚本入门
    Shell脚本入门#编写hell.sh文件.sh文件第一行,约定#!/bin/shecho"helloword"#启动hello.shbashhell.sh#若想直接./hello.sh启动,需要给hello.sh添加执行权......
  • python_selenium(部分笔记)
    什么是自动化?自动化就是以人力驱动的测试行为转化为机械执行的一种过程目的:节省人力,时间或者硬件资源,提高测试效率哪些场景下适合做自动化?1,任务测试明确,不会频繁变动2,每日......
  • Selenium CHANGELOG[最新版本4.8.2 计划中]
    SeleniumCHANGELOG[持续更新]源文件https://github.com/SeleniumHQ/selenium/blob/trunk/py/CHANGES搬运工对重点版本做时间标注,具体时间点可以参考https://github.c......
  • ElasticSearch 实现分词全文检索 - Java SpringBoot ES 索引操作
    目录ElasticSearch实现分词全文检索-概述ElasticSearch实现分词全文检索-ES、Kibana、IK安装ElasticSearch实现分词全文检索-Restful基本操作ElasticSearch......
  • element-ui 表单组件的简单封装-2
    form.vue<template><divclass="form"><hr/><h1>form{{formData}}</h1><el-formref="formRef":model="formData":label-width......
  • DELL R740做RAID指定虚拟盘起动
    1.开机按F2进入SystemSetup。  2.选择DeviceSettings  3,选择控制器  4,选择 控制器管理  5,指定虚拟磁盘。  保存重起完成。 其中第一......
  • selenium窗口之间的切换
    importtimefromselenium.webdriverimportEdgefromselenium.webdriver.common.byimportByfromselenium.webdriver.common.keysimportKeys#键盘输入#1.......
  • 关于如何解决循环中重复触发else
    关于如何解决循环中重复触发else 在学习中遇到了一种问题,就是有些需要循环条件+if条件完成的方法(如登录判断等)。例子://登录方法当时想法很简单,判断:如果账号和密码都......
  • 一文Get火热的OpenTelemetry 架构
    OpenTelemetry简称OTel,是CNCF(CloudNativeComputingFoundation,云原生计算基金会,是一个开源软件基金会,致力于云原生技术的普及和可持续发展)的一个可观测性项目。Ope......
  • Microsoft 365解决方案:如何通过Powershell管理用户、License和分配管理员角色
    Blog链接:​​​https://blog.51cto.com/13969817​​Microsoft365使用基于云的用户标识和身份验证服务AzureActiveDirectory(AzureAD)来管理用户。Microsoft365......