vue+elementUI的表格最后一行合计自定义显示方式

 更新时间:2023年06月29日 09:23:15   作者:肖邦的交响乐  
这篇文章主要介绍了vue+elementUI的表格最后一行合计自定义显示方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue+elementUI表格最后一行合计自定义显示

1.在看了elementUI的文档后重要的俩个属性是 show-summary :summary-method="getSummaries" getSummaries这个是自定义方法函数的方法。

HTML的代码:

show-summary :summary-method="getSummaries的属性要加上,还有一个很重要的一点就是要 必须要在el-table-column中必须是prop来传值"

<el-table :key='tableKey'  :data="listData"  show-summary :summary-method="getSummaries" v-loading="listLoading" border fit highlight-current-row
                style="width:100%;margin-top:8px" :header-cell-style="{background:'oldlace'}">>
                 <el-table-column prop="equipmentType" align="center" label="设备类型" min-width="50">
                  </el-table-column>
                  <el-table-column prop="equipmentName" align="center" label="设备名称" min-width="50">
                  </el-table-column>
                   <el-table-column prop="equipmentCode" align="center" label="设备编号" min-width="50">
                  </el-table-column>
                   <el-table-column prop="openRate" align="center" label="开机率" min-width="50">
                  </el-table-column>
                   <el-table-column prop="planWorkTime" align="center" label="计划工作时间" min-width="50">
                  </el-table-column>
                   <el-table-column prop="closeTime" align="center" label="关机时间(h)" min-width="50">
                  </el-table-column>
                   <el-table-column prop="machiningTime" align="center" label="加工时间(h)" min-width="50">
                  </el-table-column>
                   <el-table-column prop="stopTime" align="center" label="停工时间(h)" min-width="50">
                  </el-table-column>
                   <el-table-column prop="debugTime" align="center" label="调试时间(h)" min-width="50">
                  </el-table-column>
                <el-table-column align="center" label="查看" min-width="210">
                  <template slot-scope="scope">
                    <el-button title="时序图" type="primary" size="mini" @click="profile(scope.row)" v-show="SXTbatshow">时序图</el-button>
                    <el-button title="状态时长统计图" type="danger" size="mini" @click="cartogram(scope.row)">状态时长统计图</el-button>
                    <el-button title="状态占比图" type="success" size="mini" @click="diagram(scope.row)">状态占比图</el-button>
                  </template>
                </el-table-column>
              </el-table>

在script要写的代码:

 // 表格总计的时间
    getSummaries(param) {
        const { columns, data } = param;
       /*   console.log(1234)
        console.log(param)   */ 
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计';
            return;
          }
          //this.closeList等等是后台返回的总的数据,然后取值到这里
         switch(column.property) {
            case "closeTime":
            sums[index] = this.closeList + ' h' 
            break;
            case "machiningTime":
            sums[index] = this.machiningTimeList + ' h'
            break;
            case "stopTime":
            sums[index] = this.stopTimeList + ' h' 
            break;
            case "debugTime":
            sums[index] = this.debugTimeList + ' h' 
            break;
            default:
            break;
          }
        });
        return sums;
      },

效果图:

vue+element-ui el-table组件自定义合计(summary-method)坑

项目需要用到表格,带有合计功能的,照搬的element-ui的table组件,但是合计就是不出来

因为表格是客操作的,所以都是用的自定义内容

自定义的方法也是官方的

后面找问题发现,红框圈住的地方一直是undefined,才发应过来,在表格上应该需要写 prop的,完了写了

改成这样,每一列需要计算的都加了,就ok了

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue多选框保留勾选数据实现方式

    Vue多选框保留勾选数据实现方式

    文章浏览阅读1.2w次,点赞2次,收藏6次。文章讲述了在Vue.js组件开发中遇到的分组数据选中状态保存问题,通过三个阶段的探索,最终使用ElementUI的reserve-selection属性解决了数据切换与勾选状态保留的难题,并提供了相关代码示例和优化建议。
    2025-08-08
  • vue+elementUI组件table实现前端分页功能

    vue+elementUI组件table实现前端分页功能

    这篇文章主要为大家详细介绍了vue+elementUI组件table实现前端分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • Vue 不定高展开动效原理详解

    Vue 不定高展开动效原理详解

    本文主要介绍了Vue不定高展开动效原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 前端vue数组去重的三种方法代码实例

    前端vue数组去重的三种方法代码实例

    数组去重是我面试时候经常会问到应聘者的一个问题,所以下面这篇文章主要给大家介绍了关于前端vue数组去重的三种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • vue 框架下自定义滚动条(easyscroll)实现方法

    vue 框架下自定义滚动条(easyscroll)实现方法

    这篇文章主要介绍了vue 框架下自定义滚动条(easyscroll)实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue脚手架的简单使用实例

    Vue脚手架的简单使用实例

    这篇文章主要介绍了Vue脚手架的简单使用实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue El-descriptions 描述列表功能实现

    Vue El-descriptions 描述列表功能实现

    这篇文章主要介绍了Vue El-descriptions 描述列表功能实现,Descriptions 描述列表,列表形式展示多个字段,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • vite环境变量配置小结

    vite环境变量配置小结

    Vite环境变量配置是Vite开发环境下重要的一环,它能够根据不同的环境变量对项目进行不同的配置,使得项目更加灵活和可维护,本文就来介绍一下vite环境变量配置小结,感兴趣的可以了解一下
    2023-11-11
  • Vue实现移动端左右滑动效果的方法

    Vue实现移动端左右滑动效果的方法

    最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,经过一番折腾,最终决定四月vue-touch。下面小编把实现代码分享给大家,感兴趣的朋友一起看看吧
    2018-11-11
  • Vue监听器简单使用及注意事项说明

    Vue监听器简单使用及注意事项说明

    这篇文章主要介绍了Vue监听器简单使用及注意事项说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08

最新评论