当前位置: 首页 > news >正文

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>

相关文章:

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&q…...

自然语言处理(一):词嵌入

词嵌入 词嵌入&#xff08;Word Embedding&#xff09;是自然语言处理&#xff08;NLP&#xff09;中的一种技术&#xff0c;用于将文本中的单词映射到一个低维向量空间中。它是将文本中的单词表示为实数值向量的一种方式。 在传统的文本处理中&#xff0c;通常使用独热编码&…...

【HSPCIE仿真】HSPICE仿真基础

HSPICE概述 1. HSPICE简介3. 标准输入文件4. 标准输出文件3. HSPCIE仿真过程 1. HSPICE简介 SPICE &#xff08;Simulation Program with IC Emphasis&#xff09;是1972 年美国加利福尼亚大学柏克莱分校电机工程和计算机科学系开发 的用于集成电路性能分析的电路模拟程序。 …...

二、前端监控之方案调研

前端监控体系 一个完整的前端监控体系包括了日志采集、日志上报、日志存储、日志切分&计算、数据分析、告警等流程。 对于一名前端开发工程师来说&#xff0c;也就意味着工作不再局限于前端业务的开发工作&#xff0c;需要有Nginx服务运维能力、实时/离线分析能力、Node应…...

npm 创建 node.js 项目

package.json重要说明 package.json是创建任何node.js项目必须要有的一个文件。 因为在package.json文件中&#xff0c;有详细的项目描述&#xff0c; 包括&#xff1a; (1)项目名称&#xff1a;name (2)版本&#xff1a;version (3)依赖文件&#xff1a;dependencies 等…...

JMeter性能测试(上)

一、基础简介 界面 打开方式 双击 jmeter.bat双击 ApacheJMeter.jsr命令行输入 java -jar ApacheJMeter.jar 目录 BIN 目录&#xff1a;存放可执行文件和配置文件 docs目录&#xff1a;api文档&#xff0c;用于开发扩展组件 printable-docs目录&#xff1a;用户帮助手册 li…...

自定义date工具类 DateUtils.java

自定义date工具类 DateUtils.java 简介 Date日期类型的工具类。 api 日期格式化 format(Date date)&#xff1b;日期格式化 format(Date date, String pattern)&#xff1b;计算距离现在多久&#xff0c;非精确 getTimeBefore(Date date);计算距离现在多久&#xff0c;精确…...

Linux(Ubuntu)安装docker

2017年的3月1号之后&#xff0c;Docker 的版本命名开始发生变化&#xff0c;同时将 CE 版本和 EE 版本进行分开。 Docker社区版&#xff08;CE&#xff09;&#xff1a;为了开发人员或小团队创建基于容器的应用,与团队成员分享和自动化的开发管道。docker-ce 提供了简单的安装…...

Apache Poi 实现Excel多级联动下拉框

由于最近做的功能&#xff0c;需要将接口返回的数据列表&#xff0c;输出到excel中&#xff0c;以供后续导入&#xff0c;且网上现有的封装&#xff0c;使用起来都较为麻烦&#xff0c;故参考已有做法封装了工具类。 使用apache poi实现excel联动下拉框思路 创建隐藏单元格&a…...

常见的 HTML<meta> 标签的 name 属性及其作用

HTML中的 <meta> 标签可以通过 name 属性提供元数据&#xff0c;这些元数据可以用于指定有关文档的信息&#xff0c;以及控制浏览器和搜索引擎的行为。name 属性通常与其他属性一起使用&#xff0c;如 content、charset、http-equiv 等&#xff0c;以提供更具体的元数据信…...

【网络安全】理解报文加密、数字签名能解决的实际问题

文章目录 前言1. 防止报文泄露 —— 加密体系的出现1.1 理解非对称加密体系的实施难点1.2 加密体系的实际应用 2. 防止报文被篡改 —— 数字签名的出现2.1 数字签名的原理2.2 数字签名的实施难点2.2 数字签名的实际应用 —— 引入摘要算法 3. 实体鉴别 —— CA证书 后记 前言 …...

linux中安装nodejs,卸载nodejs,更新nodejs

卸载nodejs 卸载node sudo apt-get remove nodejs清理掉自动安装的并且不需要软件包 sudo apt autoremove查看node相关的文件 sudo whereis node如果有文件需要手动删除文件 删除该文件命令 sudo rm -rf /usr/local/bin/node在此查看node -v 是未找到&#xff0c;说明你已经…...

浅谈Python网络爬虫应对反爬虫的技术对抗

在当今信息时代&#xff0c;数据是非常宝贵的资源。而作为一名专业的 Python 网络爬虫程序猿&#xff0c;在进行网页数据采集时经常会遭遇到各种针对爬虫行为的阻碍和限制&#xff0c;这就需要我们掌握一些应对反爬机制的技术手段。本文将从不同层面介绍如何使用 Python 进行网…...

代理池在过程中一直运行

Hey&#xff0c;爬虫达人们&#xff01;在爬虫的过程中&#xff0c;要保持代理池的稳定性可不容易。今天就来和大家分享一些实用经验&#xff0c;教你如何让代理池在爬虫过程中一直运行&#xff01;方法简单易行&#xff0c;让你的爬虫工作更顺畅. 在进行爬虫工作时&#xff0…...

基于Java+SpringBoot+Vue前后端分离党员教育和管理系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…...

【flutter直接上传图片到阿里云OSS】

flutter直接上传文件到阿里云需要获取凭证&#xff0c;通过调用阿里云获取凭证的接口能拿到下面这些参数 {"StatusCode": 200,"AccessKeyId": "STS.NSsrKZes4cqm.....","AccessKeySecret": "7eGnLZaEFsRCGYJAnrtdE9n....."…...

【MySQL系列】表的内连接和外连接学习

「前言」文章内容大致是对MySQL表的内连接和外连接。 「归属专栏」MySQL 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 一、内连接二、外连接2.1 左外连接2.2 右外连接 一、内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选&#xff0c;前面篇章学习的…...

C语言日常刷题 3

文章目录 题目答案与解析1234、5、6、 题目 1.已知函数的原型是&#xff1a; int fun(char b[10], int *a); &#xff0c;设定义&#xff1a; char c[10];int d; &#xff0c;正确的调用语句是&#xff08; &#xff09; A: fun(c,&d); B: fun(c,d); C: fun(&c,&d…...

.net6中, 用数据属性事件触发 用httpclient向服务器提交Mes工单

MES开发中, 客户往往会要求 工单开始时记录工艺数据, 工单结束时将这些工艺数据回传到更上一级的WES系统中. 因为MES系统和PLC 是多线程读取, 所以加锁, 事件触发是常用手段. using MyWebApiTest.PLC; using MyWebApiTest.Service; using MyWebApiTest.Service.Entry; using M…...

sin(A)的意义

若存在矩阵A&#xff0c;则sin(A)表示对于矩阵A的每一个元素&#xff0c;进行对应的函数运算。 如:...

Cursor Pro破解工具:如何通过开源技术方案实现AI编程助手无限制使用?

Cursor Pro破解工具&#xff1a;如何通过开源技术方案实现AI编程助手无限制使用&#xff1f; 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能…...

Qwen3.5-9B-AWQ-4bit多场景落地:零售货架图分析+缺货识别+SKU自动计数

Qwen3.5-9B-AWQ-4bit多场景落地&#xff1a;零售货架图分析缺货识别SKU自动计数 1. 零售场景中的视觉理解挑战 在零售行业&#xff0c;货架管理一直是运营效率的关键指标。传统的人工巡检方式存在几个明显痛点&#xff1a; 效率低下&#xff1a;一个中型超市需要2-3小时完成…...

游戏存档终极备份指南:用Ludusavi保护你的游戏进度

游戏存档终极备份指南&#xff1a;用Ludusavi保护你的游戏进度 【免费下载链接】ludusavi Backup tool for PC game saves 项目地址: https://gitcode.com/gh_mirrors/lu/ludusavi 你是否曾因电脑重装、系统崩溃或误操作而丢失珍贵的游戏存档&#xff1f;数百小时的游戏…...

HarmonyOS 音乐播放器进阶实战——AVPlayer状态管理与播放列表

1. AVPlayer状态机深度解析 在HarmonyOS音乐播放器开发中&#xff0c;AVPlayer的状态管理就像驾驶手动挡汽车——你需要清楚知道当前处于哪个档位&#xff0c;才能平稳切换。我曾在项目中因为状态处理不当导致音乐卡顿&#xff0c;后来才发现是状态机流转出了问题。 AVPlayer…...

从NDVI到地表温度:用ENVI Band Math一次性搞定植被与热环境分析

ENVI波段运算实战&#xff1a;NDVI与地表温度的高效批量处理技巧 遥感影像分析中&#xff0c;植被指数和地表温度是最基础却又最关键的指标。传统操作流程往往需要反复切换不同工具模块&#xff0c;既耗时又容易出错。而ENVI的Band Math功能就像一把瑞士军刀&#xff0c;能将这…...

Phi-3-mini-4k-instruct-gguf多场景:覆盖个人提效、团队协作、客户支持全链路

Phi-3-mini-4k-instruct-gguf多场景&#xff1a;覆盖个人提效、团队协作、客户支持全链路 1. 认识Phi-3-mini-4k-instruct-gguf Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本。这个开箱即用的工具特别适合处理日常工作中的文本任务&#xff0c…...

WarcraftHelper:魔兽争霸III游戏性能优化与兼容性解决方案完整指南

WarcraftHelper&#xff1a;魔兽争霸III游戏性能优化与兼容性解决方案完整指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为经典游戏《魔兽争…...

告别混乱文件管理:用NERDTree打造VIM项目导航系统

告别混乱文件管理&#xff1a;用NERDTree打造VIM项目导航系统 每次打开一个包含数百个文件的复杂项目时&#xff0c;你是否会感到一阵眩晕&#xff1f;当你在多个目录间反复切换查找某个配置文件时&#xff0c;是否觉得时间在指尖悄然流逝&#xff1f;对于资深VIM用户而言&…...

FlowState Lab模型架构解析:深入理解时空生成网络原理

FlowState Lab模型架构解析&#xff1a;深入理解时空生成网络原理 1. 引言&#xff1a;为什么需要时空生成网络 视频生成一直是AI领域最具挑战性的任务之一。与静态图像不同&#xff0c;视频不仅需要保持单帧质量&#xff0c;还要确保帧间连贯性和时间一致性。传统方法往往难…...

基于STM32的智能药箱系统开发实战:从硬件搭建到云端互联

1. 为什么需要智能药箱 记得去年我奶奶因为忘记吃药导致血压飙升住院&#xff0c;当时我就在想&#xff0c;如果能有个自动提醒吃药的装置该多好。后来发现这个问题其实困扰着很多家庭——据统计&#xff0c;65岁以上老年人中&#xff0c;有超过60%存在漏服、错服药物的情况。这…...