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 = thisthis.$nextTick(() => {// 获取合计那一行的DOMlet 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-tableref="mainTable"show-summaryborder>
</el-table>
updated() {this.$nextTick(() => {this.$refs['mainTable'].doLayout()})
}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据挖掘】实验8:分类与预测建模

实验8&#xff1a;分类与预测建模 一&#xff1a;实验目的与要求 1&#xff1a;学习和掌握回归分析、决策树、人工神经网络、KNN算法、朴素贝叶斯分类等机器学习算法在R语言中的应用。 2&#xff1a;了解其他分类与预测算法函数。 3&#xff1a;学习和掌握分类与预测算法的评…

利用CSS延迟动画,打造令人惊艳的复杂动画效果!

动画在前端开发中是经常遇到的场景之一&#xff0c;加入动画后页面可以极大的提升用户体验。 绝大多数简单的动画场景可以直接通过CSS实现&#xff0c;对于一些特殊场景的动画可能会使用到JS计算实现&#xff0c;通过本文的学习&#xff0c;可以让你在一些看似需要使用JS实现的…

前端开发攻略---实现与ChatGPT同款光标闪烁打字效果。

1、演示 2、实现代码 <!DOCTYPE html> <html lang"ch-ZN"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widt…

Java 分页查询实现

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

结合 react-webcam、three.js 与 electron 实现桌面人脸动捕应用

系列文章目录 React 使用 three.js 加载 gltf 3D模型 | three.js 入门React three.js 3D模型骨骼绑定React three.js 3D模型面部表情控制React three.js 实现人脸动捕与3D模型表情同步结合 react-webcam、three.js 与 electron 实现桌面人脸动捕应用 示例项目(github)&…

【Canvas与艺术】绘制黑白山间野营Camping徽章

【说明】 中间的山月图是借用的网上的成图&#xff0c;不是用Canvas绘制的。 【成果图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head>…

如何应对Andriod面试官 -> 如何 Hook Activity 的启动流程?

前言 本章继续讲解 AMS 相关的知识点&#xff0c;如何 Hook Activity 的启动流程&#xff1b; attach 我们这样直接从 attach 入口讲起 private void attach(boolean system, long startSeq) {// 省略部分代码// AMSfinal IActivityManager mgr ActivityManager.getService(…

gcc原理和使用

gcc gcc是什么 GCC&#xff0c;全称 GNU Compiler Collection&#xff08;GNU 编译器套件&#xff09;&#xff0c;是一套功能强大的编程语言编译器&#xff0c;由自由软件基金会&#xff08;Free Software Foundation, FSF&#xff09;作为GNU项目的一部分开发和维护。它最初…

我们一起看看《看漫画学C++》中如何介绍的字符串的用法

C中的字符串使用的是 std::string 类型&#xff0c;它是C标准库中提供的字符串类&#xff0c;提供了丰富的字符串操作方法。下面是关于C字符串的一些常用用法&#xff1a; 字符串拼接 字符串查找 字符串追加 购书地址&#xff1a;https://item.jd.com/14418856.html

网工交换基础——MUX VLAN

前言&#xff1a; MUX VLAN&#xff08;Multiplex VLAN&#xff0c;多复用VLAN&#xff09;提供了一种通过VLAN进行网络资源控制的机制。例如&#xff0c;在企业网络中&#xff0c;企业员工和企业客户可以访问企业的服务器。对于企业来说&#xff0c;希望企业内部员工之…

c++的学习之路:24、 二叉搜索树概念

摘要 本章主要是讲一下二叉搜索树的实现 目录 摘要 一、二叉搜索树概念 二、 二叉搜索树操作 1、二叉搜索树的查找 2、二叉搜索树的插入 3、二叉搜索树的删除 三、二叉搜索树的实现 1、插入 2、中序遍历 3、删除 4、查找 四、二叉搜索树的递归实现 1、插入 2、删…

2024年机电工程与航天航空技术国际研讨会(ISMEEAT2024)

2024年机电工程与航天航空技术国际研讨会&#xff08;ISMEEAT2024) 会议简介 会议委员会很高兴邀请您参加在上海举行的2024国际机电工程与航空航天技术研讨会&#xff08;ISMEEAT2024&#xff09;。ISMEEAT2024为研究人员提供了一个创新的环境&#xff0c;展示他们的新研究和…