element-ui合计逻辑踩坑

element-ui合计逻辑踩坑

1.快速实现一个合计

​ Element UI所提供的el-table中提供了方便快捷的合计逻辑实现:

​ https://element.eleme.cn/#/zh-CN/component/table

在这里插入图片描述

​ 此实现方法在官方文档中介绍详细,此处不多赘述。

​ 这里需要注意,el-table所提供的自定义求和方法summary-method所获得的返回值是一个一维数组

​ 数组的顺序对应了列的顺序,以填充的方式将数组的值放入合计行。

2.实现一个多行合计的逻辑

​ 某些场景下,需要列表页同时展示总合计本页合计,但是el-table实际提供的自定义方法仅支持一个一维数组,仅能支持一行合计行的快速实现。

​ 如果想要实现多行合计行,有以下两种方案:

方案一:在自定义的合并方法中自定义包含HTML标签的返回值以实现复杂合计逻辑。

​ https://blog.csdn.net/qq_33475629/article/details/134008888

此博客实现了一行中的多个合计数据。

​ 详细可参考上述博客,此博客通过在vue代码中嵌入html标签实现了多行合并,核心代码如下:

getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          // 通过<br/>实现换行,达到2行的效果
          sums[index] =  <p>当前页面总计<br/><br/>总计</p>;
          return;
        }
        
        let countArr = [];//element原本的总计:当前页面计算的值 集合
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          countArr[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // 根据列表字段判断 取值
          if (column.property == 'total') {
            sums[index] = <p>
                {countArr[index]}<br/><br/>//第一行数据是当前页面值相加
                {this.apiData.account}<br/><br/>//第二行数据是后端接口返回
              </p>
          }
        } else {
          sums[index] = "-";
        }
      });
      return sums;
    },

效果图:

img

​ 实际逻辑为向summary-method所定义的自定义方法返回的数组中,直接放入HTML用于数据的填充。

​ 即如果数组中的值是value,则显示value;如果是HTML则会显示HTML。

​ 既然已经知道了合计行的自定义方法会如实返回HTML,那么对于一个原本只能返回一维数组的方法,我们可以向这个一维数组中塞入任何自定义的东西以实现复杂的逻辑——多行合计行分开。

​ https://blog.51cto.com/u_16213582/10217379

此博客实现了多行且不合并的逻辑。

​ 可进入此博客查阅,可发现其实现逻辑极其复杂,不乏在JS中额外关注字段名称、HTML布局的逻辑,所以不推荐此种写法。

​ 上述方案,单行实现尚可,但多行实现方案尽失优雅,故有以下方案二。

方案二:通过umy-ui中的u-table实现summary-method方法实现方便快捷的合计逻辑。

​ 官方文档:http://www.umyui.com/umycomponent/totalTable

u-table的合计与el-table的合计本质区别在于,u-table自定义方法返回值是一个二维数组

​ u-table关于合计的实现与el-table大同小异:

在这里插入图片描述

​ 原el-table返回的一维数组只可返回一行,u-table通过返回一个二维数组,可实现返回多行,二维数组中每一个一位数组代表了一行合计行,且兼顾了自定义内容。其实现逻辑可参考官方文档,较之方案一方便快捷优雅。

​ 且umy-ui是由element-ui进行改造所得,且经过多次实践,可兼容element-ui,方案具有可行性。

需要注意的是,当使用u-table时,因为u-table的结构与el-table不同而不可用,所以要针对u-table修改不分逻辑。

3.实现一个较为复杂的自定义多行合计逻辑

​ 基于2-方案二中所述,umy-ui同时提供了多行合计与自定义逻辑,关于自定义方法,官方文档的案例如下:

const values = data.map(item => Number(item[column.property]));
// 合计
if (!values.every(value => isNaN(value))) {
    means[columnIndex] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
            return prev + curr;
        } else {
            return prev;
        }
    }, 0);
    // means[columnIndex] += ' 元'
    // 改变了ele的合计方式,扩展了合计场景
    // 你以为就只有上面这样玩吗?错啦,你还可以自定义样式哦
    // means[columnIndex] = '<span style="color: red">' + means[columnIndex] + '元</span>'
    means[columnIndex] = '<span style="color: red">' + means[columnIndex] + '元</span><br/><span>123</span>'
} else {
    means[columnIndex] = '';
}

​ 但是如果我们不满足于span或者br这种HTML原生标签,想要在每个单元格中使用el-button或者其他逻辑的组件。

​ 首先易于想到的办法为在summary-method中直接写入el-button,但是实际上组件在summary-method并不会成功被渲染,查阅后有博客说是因为当此方法执行时,表格已经渲染完毕,但el-button并不会第二次被渲染,从而无法成功插入自定义的组件。

​ 所以我们可知只需要当数据变动后,合计数据可以计算得出时,我们可以直接对DOM元素进行操作实现,再去手动插入el-button关联事件,那么我们可以对表格数据datas进行监听。

​ 实际案例如下:

// 自定义合计方法
getSummaries({ columns, data }) {
    let means = [] // 合计
    columns.forEach((column, columnIndex) => {
        if (columnIndex === columns.length - 7) {
            means.push('本页合计')
            return
        }
        const values = data.map((item) => Number(item[column.property]))
        // 合计
        if (!values.every((value) => isNaN(value))) {
            means[columnIndex] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                    return prev + curr
                } else {
                    return prev
                }
            }, 0)
            // 这里的值会有一个0.000000000001的精度损失,通过toFixed排除这种损失
            means[columnIndex] = formateNumber(means[columnIndex].toFixed(2))
        } else {
            means[columnIndex] = ''
        }
    })
    return [means, this.datasSummary]
}
  watch: {
     // 对datas进行监听
    datas: function() {
      let _this = this
      this.$nextTick(() => {
        // 获取合计那一行的DOM
        let array = _this.$refs.mainTable.$refs.singleTable.$refs.footerWrapper.querySelector('.el-table__footer').querySelectorAll('td')
        let endNum = 0
        // 从倒数第六个开始遍历(因每行为6个,我只需要最后一行为按钮)
        for (let i = array.length - 6; endNum < 6; endNum++, i++) {
          let html = array[i].querySelector('.cell')
          let textContent = array[i].querySelector('.cell').textContent
          // 手动拼接按钮
          html.innerHTML = "<el-button type='text' style='cursor: pointer;color: #3b8bdb;' > " + textContent + '</el-button>'
          // 绑定click事件
          html.onclick = () => {
            switch (i) {
              case array.length - 6:
                _this.jumpToProvinceInventory(null, 'total', textContent)
                break
            }
          }
        }
      })
    }
  }

​ 最终的效果如下:
在这里插入图片描述

​ PS:此处的总合计数据为后台请求而来。

​ 使用合计时,偶尔会出现合计行加载不出或者加载慢的情况,其原因在于页面在渲染的时候,其实已经渲染出了合计行,但是合计行在计算布局的时候出现问题,导致合计行被列表页所遮挡(打开F12查看元素可发现),故没有展示。

​ 所以通过以下逻辑,手动重新计算布局即可解决:

<el-table
  ref="mainTable"
  show-summary
  border>
</el-table>
updated() {
    this.$nextTick(() => {
        this.$refs['mainTable'].doLayout()
    })
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/560580.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

设备连接IoT云平台指南

一、简介 设备与IoT云间的通讯协议包含了MQTT&#xff0c;LwM2M/CoAP&#xff0c;HTTP/HTTP2&#xff0c;Modbus&#xff0c;OPC-UA&#xff0c;OPC-DA。而我们设备端与云端通讯主要用的协议是MQTT。那么设备端与IoT云间是如何创建通信的呢&#xff1f;以连接华为云IoT平台为例…

React中redux、react-redux、@reduxjs/toolkit状态管理库的使用方式

效果 下载依赖 npm install redux react-redux reduxjs/toolkit --save在src目录下创建文件 创建index.ts文件 import { configureStore } from reduxjs/toolkit import userSlice from ./userReducerconst store configureStore({reducer: {user: userSlice.reducer} }) //…

java实现识别图片上的文字(OCR识别身份证等证件信息)

利用第三方jar包&#xff0c;实现识别图片上的文字。第三方支持地址&#xff1a;Spire.OCR for Java | 专业的图文识别组件&#xff0c;用以读取图片格式中的文本Spire.OCR for Java 是专为 Java 开发者设计的强大OCR库&#xff0c;提供高效的文字识别功能&#xff0c;能够从图…

储存器的专有名词辨析

位&#xff1a;存放一个二进制位字节&#xff1a;8位存放一个二进制数储存单元&#xff1a;一个八位的储存器&#xff0c;叫做一个储存单元储存单元地址&#xff1a;储存单元唯一的固定编号储存单元数据&#xff1a;存放于储存单元的数字储存单元容量&#xff1a;一排能储存单元…

imx6ull设备树

概念 什么是设备树 描述设备树的文件叫DTS&#xff0c;实际上就是在这个DTS文件里面&#xff0c;用树状的结构存储设备之间的关系。在以前这棵树就是设备树。 什么是DTS、DTB、DTC DTS就是我们上面的设备树源码文件、DTB是它的二进制文件、DTC是我们编译DTS的工具&#xff…

echart实现数据传输动态效果

function setDataTransfer(id) {var chart echarts.init(document.getElementById(id)); var items [{level: 1,name: "传感器",label: beijing,value: [20, 10],symbol: "",symbolSize: [30, 30]},{level: 1,symbol: "",name: "物联中心…

imazing64位2.17.6.0新功能介绍以及 iMazing最新版免费激活下载

iMazing for mac是一款可以在苹果电脑Mac os平台上使用的帮助用户管理手机的Mac手机助手&#xff0c;iMazing for mac是能力远超 iTunes 提供的终极的 iOS 设备管理器。IMazing 与你的 iOS 设备 &#xff08;iPhone、 iPad 或 iPod&#xff09;相连&#xff0c;使用起来非常的方…

openstack-图形管理 6

安装并配置组件 重启web服务及会话存储服务 图形化登录 删除云主机 使用管理员登录 删除子网网络 删除云主机网络 创建网络 创建云主机 控制节点配置 配置私有网络&#xff0c;配置虚拟子网&#xff1a; 配置ML2插件 配置Linuxbridge&#xff08;桥接&#xff09; 配置laye…

ROS仿真小车(二)——添加摄像头雷达传感器

文章目录 前言一、在 Rviz 中显示一个盒状机器人1.1 创建ROS功能包1.2 在 launch 文件中集成 URDF 与 Rviz1.3 在 Rviz 中显示机器人模型1.4 优化 rviz 启动 二、创建一个四轮圆柱状机器人模型2.1 配置urdf和launch文件2.2 URDF优化_xacro2.2.1 配置xacro文件2.2.2 编写 Xacro …

Windows平台下的Oracle 19c补丁升级

Windows平台下的Oracle 19c补丁升级 文章目录 Windows平台下的Oracle 19c补丁升级第一章 概述第二章 安装前备份2.1 软件目录备份2.2 权限备份2.3 备份数据库 第三章 安装前检查3.1 查看数据库版本3.2 升级opatch版本 第四章 安装补丁4.1 设置环境变量4.2 关闭oracle相关服务4.…

c++11 标准模板(STL)本地化库 - 平面类别(std::collate) - 定义字典序比较和字符串的散列(二)

本地化库 本地环境设施包含字符分类和字符串校对、数值、货币及日期/时间格式化和分析&#xff0c;以及消息取得的国际化支持。本地环境设置控制流 I/O 、正则表达式库和 C 标准库的其他组件的行为。 平面类别 定义字典序比较和字符串的散列 std::collate 类 std::collate 封…

VLOOKUP函数使用,为什么会报错“引用有问题”?

VLOOKUP函数的使用非常广泛&#xff0c;在excel2007版之后的软件中&#xff0c;使用VLOOKUP函数也许会遇到这样的场景&#xff0c;明明公式是没有问题的&#xff0c;公式还会报错“引用有问题”。 一、报错场景 输入公式后&#xff0c;回车确认&#xff0c;显示如下报错&…

【论文阅读】Attention is all you need

摘要 主要的序列转换模型是基于复杂的循环或卷积神经网络&#xff0c;其中包括一个编码器和一个解码器。性能最好的模型还通过一种注意力机制将编码器和解码器连接起来。我们提出了一种新的简单的网络架构&#xff0c;Transformer&#xff0c;完全基于注意机制&#xff0c;完全…

javaEE初阶——多线程(五)

T04BF &#x1f44b;专栏: 算法|JAVA|MySQL|C语言 &#x1faf5; 小比特 大梦想 此篇文章与大家分享关于多线程的文章第五篇关于 多线程代码案例二 阻塞队列 如果有不足的或者错误的请您指出! 目录 2.阻塞队列2.1常见队列2.2 生产者消费者模型有利于进行解耦合程序进行削峰填谷…

力扣---填充每个节点的下一个右侧节点指针 II

给定一个二叉树&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右侧节点。如果找不到下一个右侧节点&#xff0c;则将 next 指针设置为 NULL 。 初始状态下&#xff0c;所有 next 指针都…

大厂面试精华面试刷题

1.自定义unshift实现相同效果 2.数组去重 用vs2019来写这种练习题可以更直观的查看代码执行的效果&#xff0c;最后的代码是控制控制台执行完毕后不自动关闭 use strict;let arr [1, 1, 2, 2, 3, 3, 4, 5, 6, 7, 8, 9, 10] //1.//查重最简单的方法for循环结合splice从数组中…

win10 系统怎么开启 guest 账户?

win10 系统怎么开启 guest 账户&#xff1f; 段子手168 前言&#xff1a; guest 账户即所谓的来宾账户&#xff0c;我们可以通过该账户访问计算机&#xff0c;如打印机共享等&#xff0c;但会在一定程度上受到限制。下面分享 WIN10 系统开启 guest 来宾账户的几种方法。 方法…

【Transformer】detr梳理

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 detr detr 1. 引言 论文&#xff1a; https://arxiv.org/pdf/2005.12872v3.pdf 时间&#xff1a; 2020.5.26 作者&#xff1a; Nicolas Carion?, Fra…

SnapGene Mac激活版 分子生物学软件

SnapGene Mac是一款功能全面、操作便捷的综合性分子生物学软件&#xff0c;专为Mac用户打造。它集成了DNA序列编辑、分析、可视化和团队协作等多种功能&#xff0c;为科研人员提供了一个高效、可靠的分子生物学研究工具。 SnapGene Mac激活版下载 在SnapGene Mac中&#xff0c;…

【Hadoop大数据技术】——Sqoop数据迁移(学习笔记)

&#x1f4d6; 前言&#xff1a;在实际开发中&#xff0c;有时候需要将HDFS或Hive上的数据导出到传统关系型数据库中&#xff08;如MySQL、Oracle等&#xff09;&#xff0c;或者将传统关系型数据库中的数据导入到HDFS或Hive上&#xff0c;如果通过人工手动进行数据迁移的话&am…