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

效果图

javascript 复制代码
<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>
相关推荐
CodeCraft Studio1 分钟前
Excel处理控件Aspose.Cells教程:使用 Python 将 HTML 转换为 Excel
python·html·excel·aspose·aspose.cells·html转excel
Leo655355 分钟前
Excel 读取阶段就去掉换行
excel
麦麦大数据1 小时前
F024 vue+flask电影知识图谱推荐系统vue+neo4j +python实现
vue.js·python·flask·知识图谱·推荐算法·电影推荐
临江仙4551 小时前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
数字化顾问1 小时前
基于Spring Boot + Vue 3的乡村振兴综合服务平台架构设计与实现
vue.js·spring boot·后端
小镇学者1 小时前
【PHP】利用 xlswriter 扩展导出的Excel文件报错问题
php·excel
Neil鹏2 小时前
解决 Vite 代理中的 E RR_CONTENT_DECODING_FAILED 错误:禁用自动压缩的实践
vue.js
高频交易dragon2 小时前
xgboost参数含义以及应付金融数据中的类别不平衡的套路
金融
华仔啊2 小时前
如何用 Vue3 打造高级音乐播放器?进度条+可视化效果,代码简洁可复用!
前端·css·vue.js
ttod_qzstudio2 小时前
解决 Vue 3 + TypeScript 中 v-for 循环类型推断问题
前端·vue.js·typescript