Vue实现Excel表格中按钮增加小数位数,减少小数位数功能,多用于处理金融数据

效果图
在这里插入图片描述

<template><div><el-button @click="increaseDecimals">A按钮</el-button><el-button @click="roundNumber">B按钮</el-button><el-table :data="tableData" border><el-table-column v-for="(item, index) in tableHeader" :key="index" :prop="`col${index}`" label="表头"><template slot-scope="scope"><span>{{ formatNumber(scope.row[`col${index}`]) }}</span></template></el-table-column></el-table></div>
</template><script>
export default {name: 'HelloWorld',data() {return {tableHeader: [], // 表格表头tableData: [] // 表格数据};},mounted() {this.generateTableHeader(); // 生成随机表头this.generateTableData(); // 生成表格数据},methods: {generateTableHeader() {const minColumns = 10; // 最低列数const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';this.tableHeader = Array.from({ length: minColumns }, (_, index) => letters[index % letters.length].repeat(4));},generateTableData() {const numRows = 50; // 行数const numColumns = this.tableHeader.length; // 列数const maxNumber = 1000; // 数字的最大值this.tableData = Array.from({ length: numRows }, () => {const rowData = {};for (let i = 0; i < numColumns; i++) {rowData[`col${i}`] = Math.random() * 3;}return rowData;});},increaseDecimals() {const arr = this.tableDatafor (let row of arr) {for (let key in row) {let value = row[key];if (typeof value === 'number') {console.log('进来了');if (value % 1 !== 0) {row[key] = parseFloat(value.toString() + '0');}}}return this.tableData = arr}},roundNumber() {for (let row of this.tableData) {for (let key in row) {let value = row[key];if (Number.isFinite(value) && Number.isInteger(value) === false) {row[key] = Math.round(value * 100) / 100;}}}},formatNumber(number) {return Number(number).toFixed(4);}}
};
</script>

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

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

相关文章

Git gui教程---番外篇 gitignore 的文件使用

想说的 .gitignore 的文件一般大型的编译器带git的都会生成&#xff0c;他可以将你不想提交的文件在git下忽略掉&#xff0c;你应该不想将一大堆编译生成的过程文件&#xff0c;还有一些贼大的文件提交上git的。 凡是都有例外&#xff0c;一些冥顽不灵的编辑器&#xff0c;只能…

screen

可以参考博客&#xff1a;https://blog.csdn.net/nima_zhang_b/article/details/82797928 Linux中的screen是一个命令行工具&#xff0c;可以让用户在同一个终端会话中创建多个虚拟终端。它非常有用&#xff0c;因为它允许用户在后台运行长时间的进程**&#xff0c;即使用户断…

使用Pytorch和OpenCV实现视频人脸替换

“DeepFaceLab”项目已经发布了很长时间了&#xff0c;作为研究的目的&#xff0c;本文将介绍他的原理&#xff0c;并使用Pytorch和OpenCV创建一个简化版本。 本文将分成3个部分&#xff0c;第一部分从两个视频中提取人脸并构建标准人脸数据集。第二部分使用数据集与神经网络一…

(学习笔记-调度算法)内存页面置换算法

在了解内存页面置换算法前&#xff0c;我们得先了解 缺页异常&#xff08;缺页中断&#xff09;。 当 CPU 访问的页面不在物理内存中时&#xff0c;便会产生一个缺页中断&#xff0c;请求操作系统将缺页调入到物理内存。那它与一般的中断主要区别在于: 缺页中断在指令执行 [期…

共享内存 windows和linux

服务端&#xff0c;即写入端 #include <iostream> #include <string.h> #define BUF_SIZE 1024 #ifdef _WIN32 #include <windows.h> #define SHARENAME L"shareMemory" HANDLE g_MapFIle; LPVOID g_baseBuffer; #else #define SHARENAME "sh…

移动端测试工具有哪些

移动端测试工具有哪些 答案&#xff1a; 移动端测试工具有以下几种&#xff1a; Appium&#xff1a;一种开源的移动端自动化测试工具&#xff0c;支持多种移动操作系统&#xff08;如iOS和Android&#xff09;&#xff0c;可以使用多种编程语言进行脚本编写。 Robot Framewor…

剑指 Offer 61. 扑克牌中的顺子

剑指 Offer 61. 扑克牌中的顺子 排序&#xff0c;计算0的个数&#xff0c;看其他的数字是不是连续的&#xff0c;不连续的话用0补&#xff0c;如果0的个数不够补了&#xff0c;就无法构成顺子。 class Solution {public boolean isStraight(int[] nums) {Arrays.sort(nums);i…

LeetCode 面试题 02.02. 返回倒数第 k 个节点

文章目录 一、题目二、C# 题解 一、题目 实现一种算法&#xff0c;找出单向链表中倒数第 k 个节点。返回该节点的值。 注意&#xff1a;本题相对原题稍作改动 点击此处跳转题目。 示例&#xff1a; 输入&#xff1a; 1->2->3->4->5 和 k 2 输出&#xff1a; 4 说…

Git 版本控制系统

git相关代码 0、清屏幕&#xff1a;clear 1、查看版本号 git -v2、暂存、更改、提交 3、当前项目下暂存区中有哪些文件 git ls-files4、查看文件状态 git status -s5、暂时存储&#xff0c;可以临时恢复代码内容 git restore 目标文件 //&#xff08;注意&#xff1a;完全…

python人工智能和机器学习

人工智能和机器学习是当今科技领域最热门和前沿的话题之一。随着数据的爆炸式增长和计算能力的提升&#xff0c;人工智能和机器学习在各个领域都有广泛的应用。Python作为一种易学易用且功能强大的编程语言&#xff0c;已经成为人工智能和机器学习的首选工具之一。本文将介绍Py…

分布式事务-seata框架

文章目录 分布式事务0.学习目标1.分布式事务问题1.1.本地事务1.2.分布式事务1.3.演示分布式事务问题 2.理论基础2.1.CAP定理2.1.1.一致性2.1.2.可用性2.1.3.分区容错2.1.4.矛盾 2.2.BASE理论2.3.解决分布式事务的思路 3.初识Seata3.1.Seata的架构3.2.部署TC服务3.3.微服务集成S…

C#之OpenFileDialog创建和管理文件选择对话框

OpenFileDialog 是用于图形用户界面&#xff08;GUI&#xff09;编程的一个类&#xff0c;它用于显示一个对话框&#xff0c;允许用户选择要打开的文件。在需要用户加载或打开文件的应用程序中&#xff08;如文本编辑器、图像查看器或文档处理器&#xff09;&#xff0c;这是一…

【3D激光SLAM】LOAM源代码解析--laserMapping.cpp

系列文章目录 【3D激光SLAM】LOAM源代码解析–scanRegistration.cpp 【3D激光SLAM】LOAM源代码解析–laserOdometry.cpp 【3D激光SLAM】LOAM源代码解析–laserMapping.cpp 【3D激光SLAM】LOAM源代码解析–transformMaintenance.cpp 写在前面 本系列文章将对LOAM源代码进行讲解…

【Jenkins】持续集成部署学习

【Jenkins】持续集成部署学习 【一】Jenkins介绍【二】Docker安装Gitlab【1】首先准备一台空的虚拟机服务器【2】安装服务器所需的依赖【3】Docker的安装【4】阿里云镜像加速【5】安装Gitlab 【三】Gitlab的使用&#xff08;1&#xff09;Gitlab创建项目&#xff08;2&#xff…

SpringBoot案例-配置文件-参数配置化

前言 目前我们已经完成了部门管理和员工管理功能接口的实现&#xff0c;阿里云OSS工具类中&#xff0c;我们会设置4个参数&#xff0c;分别是云服务域名、云服务ID和密码、文件存储的Bucket、就会存在以下问题&#xff1a;参数配置分散以及参数发生变化&#xff0c;就需要对应…

数据结构—循环队列(环形队列)

循环队列&#xff08;环形队列&#xff09; 循环队列的概念及结构循环队列的实现 循环队列的概念及结构 循环队列是一种线性数据结构&#xff0c;其操作表现基于 FIFO&#xff08;先进先出&#xff09;原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。…

缓存解决方案

缓存 背景简介caffeine实战redis 分布式缓存实战gitee项目地址背景 在服务端编程当中,缓存主要是指将数据库的数据加载到内存中,之后对该数据的访问都在内存中完成,从而减少了对数据库的访问,解决了高并发场景中数据库容易成为性能瓶颈的问题;以及基于内存的访问速度高于…

get属性是什么?有什么用?在什么场景用?get会被Json序列化?

在JavaScript中&#xff0c;对象的属性不仅可以是数据属性&#xff08;即常规的键值对&#xff09;&#xff0c;还可以是访问器属性&#xff08;accessor properties&#xff09;。访问器属性不包含实际的数据值&#xff0c;而是定义了如何获取&#xff08;get&#xff09;和设…

同为科技(TOWE)带热插拔功能机柜PDU插座的应用

所谓热插拔&#xff08;hot-plugging或Hot Swap&#xff09;&#xff0c;即带电插拔&#xff0c;指的是在不关闭系统电源的情况下&#xff0c;将模块、板卡插入或拔出系统而不影响系统的正常工作&#xff0c;从而提高了系统的可靠性、快速维修性、冗余性和对灾难的及时恢复能力…

Sql注入攻击的三种方式

SQL注入是指web应用程序对用户输入数据的合法性没有判断或过滤不严,攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句,在管理员不知情的情况下实现非法操作,以此来实现欺骗数据库服务器执行非授权的任意查询,从而进一步得到相应的数据信息。SQL 注…