elment-ui 表格进行实时百分比计算

表格进行实时百分比计算

开发中的需求和样式图

因为要实时渲染，所以调用了@input事件，实时触发input框变化事件
html代码

<el-table-column prop="dosage" show-overflow-tooltip><template slot="header">用量（kg）<i class="imported">*</i></template><template slot-scope="scope"><el-inputv-model="scope.row.dosage" @input="calculation(scope.row.dosage, scope.$index)">     ---传入所在行数据</el-input></template></el-table-column><el-table-column prop="percentage" label="占比%" show-overflow-tooltip></el-table-column>

js代码

  watch: {// 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可$route: 'getParams',//公共属性实时监听只要产生变化就重新计算所有行数据numbers: {handler(val, oldVal) {console.log('currentForm', val, oldVal);this.allcalculation();}}},methods: {//遍历循环所有表格数据allcalculation() {//this.tableData 绑定的表格数据this.tableData.forEach((item, index) => {console.log(item.dosage);//传入用量和所在行this.calculation(item.dosage, index);});},//计算calculation(row, index) {console.log(row);// console.log(index);var sum = 0;var sums = [];this.tableData.forEach((item) => {//如果数据为空就返回 0if (!item.dosage) {item.dosage = 0;}//遍历循环添加浮点小数到新的数组中sums.push(parseFloat(item.dosage));});console.log(sums);//计算总数for (let i = 0; i < sums.length; i++) {sum += sums[i];}console.log(sum);let numbers = '0%';//调用事件计算返回百分比numbers = this.toPercent(parseFloat(row) / sum);//进行百分比赋值this.tableData[index].percentage = numbers;//改变公共属性 配合监听变化this.numbers = numbers;},toPercent(point) {var str = Number(point * 100).toFixed(2);str += '%';return str;},},

要注意点，如果你的数据为空记得写个判断，返回值赋值为0，否则所有百分比数据会变成NAN%
我写的方法可能是最笨的了，有什么更好的改进方法，欢迎交流学习

elment-ui 表格进行实时百分比计算相关推荐

大数据实时流计算详解
开篇词-攻克实时流计算难点,掌握大数据未来我曾任职于华为 2012 实验室高斯部门,负责实时分析型内存数据库 RTANA.华为公有云 RDS 服务的研发工作.目前,我专注于移动反欺诈解决方案的研发. ...
vue + elment ui打印表格数据
vue + elment ui打印表格数据主要的原理就是在vue项目中通过调用浏览器自带的打印功能,完成对table数据的打印解决表格错位以及elment ui 双重表头的问题封装一下打印 ...
腾讯基于 Flink 的实时流计算平台演进之路
原文地址:https://www.infoq.cn/article/TjDeQDJQpKZ*NpG71pRW 大家好,我是来自腾讯大数据团队的杨华(vinoyang),很高兴能够参加这次北京的 QCo ...
el如何获取复选框的值_element ui 表格提交时获取所有选中的checkbox的数据
设定此属性@selection-change="changeFun",意思是每次勾选的时候都会触发这个事件 //复选框状态改变 changeFun(val) { this.mult ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...
Elment UI的使用说明
一. Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率,就如同bootstrap. 2.组件分类 ElementUI ...
用php做一个简单的汇率,vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...
海量数据的实时指标计算
最近看了一本书叫<风控要略-互联网业务反欺诈之路>,这本书主要是讲互联网产品安全防范的,我之前做过一年情报数据分析的工作,当时觉得这方面工作很机密,网络上几乎没什么相关的资料,这本书让 ...

elment-ui 表格进行实时百分比计算

表格进行实时百分比计算

elment-ui 表格进行实时百分比计算相关推荐

最新文章

热门文章