Element-UI饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,其功能较为完善,根据其文档与demo学习,非常容易上手,但是我在使用其tabel组件时,发现我的功能 需求并不适用官网给出的demo,于是进行了修改。

  需求描述:只将数量列进行合计,其他行不用合计

出现问题:公众号列出现并不想出现的合计数

  

根据官网的demo,只要列中包含数字,不管你是否需要,都会进行合计并显示。

  修改后功能图片:

  

  修改后的代码:

  1

  

  2

  

  附代码:

template:

<el-table
:data="wx_attention_list"
border
stripe
show-summary
:summary-method="getTotal"
style="width: 65%;margin:80px auto 15px auto;"
>
<el-table-column
prop="number"
label="序号"
width="100"
>
</el-table-column>
<el-table-column
prop="wx_key_word"
label="公众号"
>
</el-table-column>
<el-table-column
prop="num"
label="数量"
>
</el-table-column>
</el-table>

methods:

getTotal(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
const values = data.map(item => Number(item[column.property]));
if (column.property === 'num') {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index];
} else {
sums[index] = '--';
}
});

return sums;
}

Element-ui 实现table的合计功能的更多相关文章

  1. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  2. 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。

    因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...

  3. Element Ui中table实现表格编辑效果

    主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

  4. Element UI的Table用法

    Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...

  5. Vue + Element UI 实现权限管理系统 (功能组件封装)

    组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...

  6. element ui里面table分页,页数从0开始的怎么做?

    需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...

  7. 怎么样使element ui 的table某列变色

    第一步.在el-table里面加上:row-style="rowClass" <el-table :data="targetCarList" border ...

  8. element ui的table的头部自定义

    <el-table-column label="级别" min-width="120" prop="clueLevel" align= ...

  9. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

随机推荐

  1. HotSpot源码分析之C++对象的内存布局

    HotSpot采用了OOP-Klass模型来描述Java类和对象.OOP(Ordinary Object Pointer)指的是普通对象指针,而Klass用来描述对象的具体类型.为了更好理解这个模型, ...

  2. JS控制Video播放器(快进、后退、播放、暂停、音量大小)

    思路: 一.首先监听触发事件. 比如:向上键对应的keyCode为38,向下键对应的keyCode为40,向左键对应的keyCode为37,向右键对应的keyCode为39,空格键对应的keyCode ...

  3. 一篇文章了解_unittest

    1. 基本概念 2018年10月7日 星期日 11:39 unittest是python自带的单元测试框架,有时候又被称为"PyUnit",是python版本的JUint实现. 该 ...

  4. Docker学习—Swarm

    前言: 前一篇<Docker学习-Machine>中对Machine 进行了学习,本篇继续学习Swarm,那么Swarm是什么呢,有什么用呢?接下来一步步了解. 一.什么是Docker-S ...

  5. Tomcat口令暴力猜解&&后台getshell

    Tomcat环境搭建 windows系统xampp搭建tomcat linux yum搭建tomcat 修改tomcat目录下的conf/tomcat-users.xml文件开启管理后台口令认证 &l ...

  6. pikachs 渗透测试2-XSS漏洞及利用

    一.概述 XSS(跨站脚本)概述 Cross-Site Scripting 简称为"CSS",为避免与前端叠成样式表的缩写"CSS"冲突,故又称XSS.一般XS ...

  7. overflow:scroll

    <div style="position: relative;"> <div class="container mycontent" styl ...

  8. 太妙了!Spring boot 整合 Mybatis Druid,还能配置监控?

    Spring boot 整合 Mybatis Druid并配置监控 添加依赖 <!--druid--> <dependency> <groupId>com.alib ...

  9. swupdate实例

    平台:imx8mm 系统:linux 4.4   如果需要系统了解swupdate,请参考文章:嵌入式系统更新swupdate分类   一.制作升级包 emmcsetup.lua用来描述update执 ...

  10. Wasp XT合成器功能介绍

    本章节将采用图文结合的方式给大家讲解电音编曲软件FL Studio中的Wasp XT合成器的相关功能,感兴趣的朋友可以一起来交流哦. 下面我们一起来看看吧 Wasp XT是一个3振荡器合成器,它包含一 ...