【解决 Element UI 当中 el-table 中使用 show-summary 不显示合计一行】

这篇具有很好参考价值的文章主要介绍了【解决 Element UI 当中 el-table 中使用 show-summary 不显示合计一行】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景:

问题:在进行数据统计的过程中使用到了element-ui 的 el-table 组件,出现了合计统计无法渲染情况。

示例场景:在制作统计一栏时需要用到 element-ui 当中的 el-table 表格组件,组件当中有 show-summary 参数可以实现表格的自动合计,在实际开发中出现了渲染失败或不渲染的情况导致无法展示合计一行
show-summary,element UI 前端,ui


问题描述

提示:element ui 在参数以及方法较多时会出现某些功能渲染失败。

例如:在 el-table 当中专门添加了 show-summary 参数以及 :summary-method=“方法名” 方法却无法及时进行渲染从而导致无法展示表尾合计行

  <el-table
    :data="xxxxxx"
    border
    show-summary
    :summary-method="方法名"
    style="width: 100%">
	<el-table-column
      prop="xxx"
      label="xxx"
      width="180">
    </el-table-column>
  </el-table>

原因分析:

可能原因:组件和参数使用过多导致渲染出现异步而失效


解决方案:

在 table 当中添加 ref=“table1”

  <el-table
    :data="xxxxxx"
    border
    show-summary
    :summary-method="方法名"
    style="width: 100%"
    ref="table1"//重点!!!
>
	<el-table-column
      prop="xxx"
      label="xxx"
      width="180">
    </el-table-column>
  </el-table>

在 js 代码区中添加如下代码:

export default {
  updated () {
    this.$nextTick(() => {
      this.$refs['table1'].doLayout();
    })
  },
}

成功解决

show-summary,element UI 前端,ui文章来源地址https://www.toymoban.com/news/detail-728949.html

到了这里,关于【解决 Element UI 当中 el-table 中使用 show-summary 不显示合计一行】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui中el-table的合并相同列内容的解决方法,简单实用

    element ui中el-table的合并相同列内容的解决方法,简单实用 废话不说,直接上代码,vue页面中的几个部分如下: 注意几点: 1、el-table中 写上: :span-method=“objectSpanMethod” 2、两个方法不用改动 3、想合并哪列,在data中columnArr数组里填上列名。 4、如果有bug,自己去调整吧 完事

    2024年02月11日
    浏览(50)
  • Element-UI 解决el-table合并行+固定列鼠标浮动高亮问题

    今天在搬砖的时候发现了一个问题,当用el-table组件画表格,并且存在合并行时,鼠标浮动的高亮样式有些问题,如下图。 可以看到虽然已经合并成为了一行但是,高亮部分的显示样式仍然是分家状态。由于我画的表格需要有固定列,虽然百度了一些大神的方法,但是仍然没

    2024年02月11日
    浏览(51)
  • element-ui里el-table表格操作列多横线怎么解决

    在vue中封装了element-ui表格,然后使用插槽,fixed定位等,导致样式出现了错乱 本文就到此结束了,希望大家共同努力,早日拿下 el 💪💪。 如果文中有不对的地方,或是大家有不同的见解,欢迎指出 🙏🙏。 如果大家觉得所有收获,欢迎一键三连💕💕。

    2024年02月11日
    浏览(54)
  • 解决vue-electron element-UI中el-table表格不显示

    问题:element-UI官网上el-table组件,引入自己项目的时候表格不显示。 解决方案: 修改.electron-vuewebpack.renderer.config.js 将 修改为 即可解决。

    2024年02月16日
    浏览(50)
  • vue的element ui使用el-table组件实现懒加载树、默认自动展开层级(一层,二层)、并且解决新增、删除、修改之后树节点不刷新问题

    问题 :数据量太大了,导致接口返回数据时间较长。 解决 : 将ElementUi中Table组件加载改为懒加载(查看文档)。 思路 :初始化打开页面时只显示第一级菜单,用户点击展开菜单之后往后端发送请求,然后加载出一级子菜单;后台只用有一个根据菜单id查询他子菜单的接口就可以

    2024年01月16日
    浏览(40)
  • vue使用Element UI时,el-table表格整行操作单选

    需求:表格复选修改为单选,只可选择一个;不满足条件的不可勾选;可进行整行操作 注意使用的方法. 需求由复选改为单选后, 左上角全选框要进行隐藏 ,复选框也变成单选框,这里是通过css样式进行调整的 勾选复选框的select和整行操作的row-click可以共用同一个方法,

    2024年02月14日
    浏览(43)
  • 【element-ui】使用el-checkbox完成el-table表格数据的全选操作

    需求:表格有一列为勾选框列,表格下面有单独的按钮本页勾选和全部勾选,跨页状态可以保存回显,如下图所示: 思路:使用一个数组[]存储每一页是否全选的状态,再使用{}来存储数据的所有选中状态,其中key为对应的页码,value为每一页的选中数据【核心❗】 1、el-tab

    2024年02月11日
    浏览(47)
  • 使用element-ui中的el-table回显已选中数据时toggleRowSelection报错

    最近在写一个后台,需要在表格中多选,然后点击编辑按钮的时候,需要回显已经选中的表单项 之前根据以上代码,就可以实现回显,但是这次没有,还报了一个错,报错如下 找了一下原因,这个回显是一个弹框,我在刚进页面就走了这部分逻辑,相当于在请求接口的时候

    2024年02月10日
    浏览(41)
  • element-ui中的el-table的summary-method(合计)的使用

    图片1: 图片2: 优点:         直接使用summary-method方法,直接,方便 缺点:         只是在表格下面添加了一行,如果想有多行就不行了 优点:          可以想表格下面添加多少行都行, 缺点:         列表的序号会一直往下走

    2024年02月11日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包