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.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>


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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

冠达管理:股票分红的钱会计算到收益吗?为什么分红之后出现亏损?

我们常说炒股的主要收益来源便是除了高抛低吸赚取差价收益之外&#xff0c;还有参加股票分红取得。那么股票分红的钱管帐算到收益吗&#xff1f;为什么分红之后呈现亏本&#xff1f;下面就由冠达管理为大家剖析&#xff1a; 股票分红的钱管帐算到收益吗&#xff1f; 不会。 股…

轻松搭建远程Node.js服务端,让你的应用在公共网络中畅行无阻!

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…

【Redis从头学-8】Redis中的ZSet数据类型实战场景之用户积分榜

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;啥技术都喜欢捣鼓捣鼓&#xff0c;喜欢分享技术、经验、生活。 &#x1f60e;人生感悟&#xff1a;尝尽人生百味&#xff0c;方知世间冷暖。 &#x1f4d6;所属专栏&#xff1a;Re…

Vant 4.6.4发布,增加了一些新功能,并修复了一些bug

导读Vant 4.6.4发布,增加了一些新功能&#xff0c;并修复了一些bug等。 新功能 feat(area-data): 更新芜湖的县区数据&#xff0c;由 nivin-studio 在 #12122 中贡献feat(Locale): 添加塞尔维亚语到国际化&#xff0c;由 RogerZXY 在 #12145 中贡献feat(ImagePreview): 添加 c…

带你了解SpringBoot---开启Durid 监控

文章目录 数据库操作--开启Durid 监控整合Druid 到Spring-Boot官方文档基本介绍Durid 基本使用代码实现 Durid 监控功能-SQL 监控需求:SQL 监控数据SQL 监控数据-测试页面 Durid 监控功能-Web 关联监控需求:Web 关联监控配置-Web 应用、URI 监控重启项目 Durid 监控功能-SQL 防…

VBA Excel函数的使用

一个简单的教程&#xff0c;实现VBA自定义函数。 新建模块 复制后面的代码放进来 函数的入口参数不定义&#xff0c;则认为是一块区域&#xff1b; 反之&#xff0c;如FindChar1 As String&#xff0c;则认为是输入的单值。 循环和分支如下例子&#xff0c;VB比较接近自然语…

删除ubuntu开始菜单中的图标

背景 本来是很好看干净的界面 更新谷歌浏览器后出现了Gmail&#xff0c;幻灯片&#xff0c;谷歌硬盘等跟谷歌相关的乱七八糟东西搞得界面就很丑 解决问题 删掉那个图标 输入命令 sudo nautilus /usr/share/applicationssudo nautilus ~/.local/share/applications可以…

爬虫借助代理会让网速快点吗?

亲爱的程序员朋友们&#xff0c;你曾经遇到过爬虫网速慢的情况吗&#xff1f;别着急&#xff01;今天我将和你一起探讨一下使用代理是否可以加速爬虫&#xff0c;让我们一起进入这个轻松又专业的知识分享。 一、原因和机制的解析 1.IP限制 某些网站为了保护资源和防止爬虫行…

js逆向工具-v-jstools插件自动补环境

目录 一、反爬参数如图二、知识点提前Get三、v_jstools安装四、详细分析流程方法一&#xff1a;本案例操作流程之-生成临时环境-直接可以用的情况方法二&#xff1a;本案例操作流程之-生成临时环境-不可以直接用&#xff0c;需要调试补下 五、文章与视频 一、反爬参数如图 二、…

2023-08-22 Unity Shader 开发入门2 —— Shader 开发介绍

文章目录 一、必备概念1 计算机图形程序接口2 图形接口程序与其他概念的联系 二、Shader 开发1 Shader2 Shader 开发3 需掌握的内容 一、必备概念 1 计算机图形程序接口 ​ 计算机图形程序接口&#xff08;Graphics API&#xff09;是一套可编程的开放标准&#xff0c;不论 2…

【C++奇遇记】内存模型

&#x1f3ac; 博客主页&#xff1a;博主链接 &#x1f3a5; 本文由 M malloc 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f384; 学习专栏推荐&#xff1a;LeetCode刷题集 数据库专栏 初阶数据结构 &#x1f3c5; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如…

五种 CSS 位置类型以实现更好的布局

在 Web 开发中&#xff0c;CSS&#xff08;层叠样式表&#xff09;用于设置网站样式的设置。为了控制网页上元素的布局&#xff0c;使用CSS的position属性。因此&#xff0c;在今天这篇文章中&#xff0c;我们将了解 CSS 位置及其类型。 CSS 位置属性用于控制网页上元素的位置…

Anaconda Conda实现Python多环境管理

Anaconda Conda实现Python多环境管理 Python多环境AnacondaConda环境管理下载安装镜像配置环境管理常用命令创建Python3.10环境 Python多环境 Python多环境指的是在同一台计算机上同时安装并管理多个不同的Python版本。可以在不同版本的Python之间切换&#xff0c;并确保每个项…

FastDeploy部署(C++ Win10)

参考链接&#xff1a;FastDeploy C部署保姆级教程 FastDeploy是百度为了解决AI部署落地难题&#xff0c;发布的新一代面向产业实践的推理部署工具。它旨在为AI开发者提供模型部署最优解&#xff0c;具备全场景、简单易用、极致高效三大特点。项目地址&#xff1a;FastDeploy项…

数据库概述

目录 数据库 数据库的基本概念 数据 表 数据库 数据库管理系统 数据库系统 DBMS的主要功能 DBMS的工作模式 ​编辑 数据库的发展 数据库类型 关系数据库 关系数据库的构成 非关系数据库 非关系型数据库的优点 关系型数据库与非关系型数据库的区别 数据库 数据库…

openCV实战-系列教程2:阈值与平滑处理(图像阈值/图像平滑处理/高斯/中值滤波)、源码解读

1、图像阈值 t图像阈值函数&#xff0c;就是需要判断一下像素值大于一个数应该怎么处理&#xff0c;小于一个数应该怎么处理 ret, dst cv2.threshold(src, thresh, maxval, type) 参数解析&#xff1a; src&#xff1a; 原始输入图&#xff0c;只能输入单通道图像&#…

Shell 编程快速入门 之 数学计算和函数基础

目录 1. 求两数之和 整数之和 浮点数之和 2. 计算1-100的和 for...in C风格for循环 while...do until...do while和until的区别 关系运算符 break与continue的区别 3. shell函数基础知识 函数定义 函数名 函数体 参数 返回值 return返回值的含义 return与…

【Ubuntu】从Graylog到Grafana Loki:构建更强大的网络设备管理和监控系统

在将Graylog部署到生产环境时&#xff0c;我们遇到了一些问题&#xff0c;其中最主要的是无法安装MongoDB并且无法随时重启机器去修改BIOS设置来修复问题 【WARNING: MongoDB 5.0 requires a CPU with AVX support, and your current system does not appear to have that! 】。…

AI 绘画Stable Diffusion 研究(十一)sd图生图功能详解-美女换装

免责声明: 本案例所用安装包免费提供&#xff0c;无任何盈利目的。 大家好&#xff0c;我是风雨无阻。 为了让大家更直观的了解图生图功能&#xff0c;明白图生图功能到底是干嘛的&#xff0c;能做什么事情&#xff1f;今天我们继续介绍图生图的实用案例-美女换装的制作。 对于…

第6天----【位运算进阶之-----位与()】七夕特别版

今天我们来学习C语言的位与。 ❤️C语言的位与&#xff08;&&#xff09;操作是一种按位运算符&#xff0c;用于对两个操作数的每个对应位执行逻辑与操作。它的操作规则如下&#xff1a; 如果两个操作数的对应位都为1&#xff0c;则结果的对应位也为1。&#xff08;全1才…