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

news2024/10/5 16:28:41

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

<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.tableData
      for (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.coloradmin.cn/o/913648.html

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

相关文章

绿盾客户端字体库文件被加密了,预览不了

环境: 绿盾客户端7.0 Win10 专业版 问题描述: 绿盾客户端字体库文件被加密了,预览不了 预览不了 解决方案 1.打开控制台 2.进入规则中心 3.找到对应的操作员类型 4.选择自定义程序 5.右键新建程序,填最开始获得的程序名,可执行程序选择本地程序,我本地没有这个…

410随身WiFi刷完openwrt后作玩具nas/bt机

简单流程介绍&#xff1a;机子wifi模式改为客户端&#xff0c;添加ipv6&#xff0c;开放需要的端口&#xff0c;切换USB工作模式&#xff0c;挂载usb储存&#xff0c;安装qb/aria2之类软件 前提就是刷好openwrt了&#xff0c;教程话题里有 注意opemwrt的操作要及时保存并应用&a…

openGauss学习笔记-47 openGauss 高级数据管理-权限

文章目录 openGauss学习笔记-47 openGauss 高级数据管理-权限47.1 语法格式47.2 参数说明47.3 示例 openGauss学习笔记-47 openGauss 高级数据管理-权限 数据库对象创建后&#xff0c;进行对象创建的用户就是该对象的所有者。数据库安装后的默认情况下&#xff0c;未开启三权分…

5、Spring_DI注解开发

DI 注解开发 1.目前面临问题 建立 mapper public interface EmployeeMapper {void save(); }建立 mapper 实现类 Repository public class EmployeeMapperImpl implements EmployeeMapper {public void save(){System.out.println("保存员工信息");} }建立 service …

档案开发:增加查询和打卡按钮

档案开发&#xff1a;增加查询和打卡按钮 和单据开发的不同点 没有单据类型不是右击–>特性–>单据主表/单据子表&#xff0c;而是右击–>特性–>选择想要的接口访问器类型是NCVO不需要映射不是项目右键–>新建–>其他–>主子表单据结点&#xff0c;而是…

怕封店吗?来看看这份亚马逊测评宝典吧!

测评&#xff0c;一直是跨境电商亚马逊行业常谈论的话题&#xff0c;因为它是获取销量最快的方法之一&#xff0c;但对于测评&#xff0c;跨境电商亚马逊平台也是深恶痛绝&#xff0c;严厉打击测评行为&#xff0c;但不少的卖家仍旧喜欢铤而走险&#xff0c;做测评去提高店铺的…

Python打印七夕礼物

参考&#xff1a; python写七夕硬核礼物&#xff01; - 周旋机器视觉的文章 - 知乎 https://zhuanlan.zhihu.com/p/196451223 # -*- coding:utf-8 -*-# 导入opencv和openpyxl import openpyxl import cv2 as cv import numpy as np from openpyxl import load_workbook from o…

组织机构代码,注册号,纳税人识别号有什么区别?海关备案是什么?

组织机构代码&#xff0c;注册号&#xff0c;纳税人识别号有什么区别&#xff1f; 之前写过关于企业信用代码的文章&#xff0c;今天来讲一下企业的三证合一。三证合一指的是将识别号&#xff0c;注册号&#xff0c;组织机构代码三者共用一个号的说法。 但是&#xff0c;你看…

群英荟萃,决战渝城 | 第七届集创赛“加速科技杯”总决赛圆满落幕!

8月20-22日&#xff0c;第七届全国大学生集成电路创新创业大赛全国总决赛在重庆举办&#xff0c;“加速科技杯”中有26支优秀队伍从四百多支报名队伍中脱颖而出&#xff0c;获得总决赛各项大奖&#xff0c;取得了优异的成绩&#xff01;大赛同期举办的还有集创赛嘉年华、人才对…

python 项目打包器pyinstaller实践

在创建了独立应用&#xff08;自包含该应用的依赖包&#xff09;之后&#xff0c;还可以使用 PyInstaller 将 Python 程序生成可直接运行的程序&#xff0c;这个程序就可以被分发到对应的 Windows 或 Mac OS X 平台上运行。 安装 PyInstalle Python 默认并不包含 PyInstaller…

高隔音活动隔断墙是一种设计用于隔离声音、提供隐私和创建灵活空间的分隔墙

高隔音活动隔断墙是一种设计用于隔离声音、提供隐私和创建灵活空间的分隔墙。这种隔断墙通常在需要随时改变房间布局的场合&#xff0c;如酒店、会议中心、展览厅、办公室等地使用。 以下是有关高隔音活动隔断墙的一些重要特点和优势&#xff1a; 1. 隔音性能&#xff1a;高隔音…

Protobuf在IDEA中的插件安装教程

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

【中危】Apache Ivy<2.5.2 存在XXE漏洞 (CVE-2022-46751)

漏洞描述 Apache Ivy 是一个管理基于 ANT 项目依赖关系的开源工具&#xff0c;文档类型定义(DTD)是一种文档类型定义语言,它用于定义XML文档中所包含的元素以及元素之间的关系。 Apache Ivy 2.5.2之前版本中&#xff0c;当解析自身配置、Ivy 文件或 Apache Maven 的 POM 文件…

改变住宅区空气质量,你一定要知道!

在现代城市生活中&#xff0c;住宅区的环境质量对居民的健康和舒适感起着至关重要的作用。扬尘颗粒和噪声不仅直接影响人们的日常生活&#xff0c;还可能对居民的健康和生活品质造成持续的影响。 在不断提升环保意识的同时&#xff0c;政府、社区和居民也将共同努力&#xff0c…

0基础入门代码审计-2 Fortify初探

0x01 序言 目前又加入一位新童鞋了&#xff0c;最近将会再加入cs相关的专栏&#xff0c;都是以基础为主&#xff0c;毕竟太复杂的东西&#xff0c;能看懂的人太少。 0x02 准备工具 1、Fortify 2、需要审计的源码 0x03 Fortify的简单使用 1、 1、在开始菜单栏中找到Audit Wo…

【Flutter】Flutter 使用 font_awesome_flutter 展示图标

【Flutter】Flutter 使用 font_awesome_flutter 展示图标 文章目录 一、前言二、安装和基本使用1. 安装2. 基本使用示例3. 图标的命名和样式 三、自定义图标和高级功能1.动态检索图标2.排除样式和优化 四、完整示例五、总结 一、前言 在现代移动应用开发中&#xff0c;图标起着…

Dockerfile制作LAMP环境镜像

文章目录 使用Dockerfile制作LAMP环境镜像编写Dockerfile不修改默认页面修改默认页面 Start Script目录结构及文件登录私有仓库给镜像打标签上传镜像页面检查检测镜像可用性 使用Dockerfile制作LAMP环境镜像 编写Dockerfile 不修改默认页面 FROM centos:7 MAINTAINER "…

怎么把cad文件转成图片?

怎么把cad文件转成图片&#xff1f;我知道有些朋友经常需要制作各种 CAD 图纸。通常情况下&#xff0c;这些图纸以 DWG 格式保存&#xff0c;只能使用专业的 CAD 软件来打开。但是&#xff0c;如果你想与他人共享这些 CAD 图纸&#xff0c;并且对方的计算机上没有安装 CAD 软件…

实验五 Linux 内核的安装与加载

【实验目的】 掌握 uboot 的使用方法&#xff0c;能够使用 uboot 安装和加载内核 【实验环境】 ubuntu 14.04 发行版FS4412 实验平台 【注意事项】 实验步骤中以“$”开头的命令表示在 ubuntu 环境下执行&#xff0c;以“#”开头的命令表 示在开发板下执行 【实验步骤】 …

cve-2023-3079漏洞与patch分析

POC function set(arr, key, val) {arr[key] val; } function leak_hole() {for(let i 0; i < 10; i) {set(arguments, "foo", 1);}set(new Array(), 0, 1);set(arguments, 0, 1);return arguments[1]; } %DebugPrint(leak_hole());分析 通过对此漏洞的patch分…