vue前端表格展示number类型太长数值四舍五入为啥

Posted 2023-05-05

在 Vue 前端表格展示 number 类型的数值时，如果数值过长，可能会出现展示不完全的情况，为了保持页面的美观和易读性，我们需要对数字进行四舍五入处理。下面是一些可能出现的问题以及解决方法：

1. 数字展示异常，出现 NaN 或者 Infinity

当显示的数字过大或过小时，可能会出现 NaN 或 Infinity 的情况，这是因为 JavaScript 对浮点数的精度有限，而且对于一些超出范围的数字，计算机并不能准确表示，从而出现这种情况。建议在进行数值计算时，使用 Number 类型的数据，并避免使用浮点数。

2. 数字位数过长

当数字位数过长时，可以使用 toFixed 方法对数字进行四舍五入处理，将其保留指定位数的小数。例如：

```js
const num = 12345.6789;
const roundedNum = num.toFixed(2); // 12345.68
```

3. 表格展示格式不合适

在使用表格展示数字时，可以考虑对数字进行格式化处理，例如添加千分位分隔符、保留指定位数的小数等。可以使用第三方库如 numeral.js 或 accounting.js 来方便地完成此类操作。例如：

```js
import numeral from 'numeral';

const num = 12345678;
const formattedNum = numeral(num).format('0,0'); // 12,345,678
``` 参考技术A Vue前端表格展示number类型太长数值四舍五入是因为在表格中显示的数据可能会比较多，如果不进行四舍五入，可能会导致表格显示不整齐，影响表格的美观性。
此外，在Vue前端表格中，还可以使用filters过滤器对number类型数据进行格式化，以达到四舍五入的目的。例如，使用toFixed()方法可以将number类型的数据保留指定的小数位数，从而达到四舍五入的效果。此外，还可以使用Vue.filter()方法，自定义过滤器，实现更多的数据格式化功能。 参考技术B 您好，针对您的问题，“”，以下是我的解答。

在Vue前端开发中，当我们使用表格展示数字类型数据时，通常会出现一些数字过长的情况。这些过长的数字可能会导致页面显示不美观，也可能会导致数据读取和计算的困难。为了解决这个问题，我们通常会进行四舍五入。

四舍五入的计算原理其实很简单，就是将数字按照精度要求进行进位或舍去。比如，对于浮点数可以使用toFixed()函数进行保留小数位数，对于整数可以使用Math.round()函数将其四舍五入到最接近的整数。

然而，在具体实现中，我们需要注意几个问题：

首先，四舍五入的精度问题，通常情况下精度要求越高，计算代价也会越大，需要根据实际需求进行处理。

其次，四舍五入可能会出现一些奇怪的误差，特别是对于一些小数的运算，我们需要注意计算过程中的精度丢失问题，并采取合适的处理方式。

最后，我们需要在表格展示中进行四舍五入时，保证数字的单位正确，通常我们会在数字后面加上千分位分隔符，并显示对应的单位（如万元、亿元等）。

总之，在开发前端表格展示时，我们需要考虑到数字长度和精度问题，并合理运用四舍五入等方法进行优化，以提高用户体验和数据的可视化程度。 参考技术C 在前端中展示数据时，我们经常需要对数据进行处理和格式化，以便更好地呈现给用户。在Vue前端表格展示中，如果数值类型太长，会导致表格显示不够美观，影响用户体验。因此，我们通常会采用四舍五入的方式来处理这种情况。

四舍五入是一种常见的数值处理方式，它可以将一个数值按照一定的精度进行处理，从而得到更加整洁和规范的结果。在Vue前端中，我们可以使用toFixed()方法来实现四舍五入的功能。该方法接受一个参数，用于指定保留的小数位数。例如：

```
var num = 1.23456789;
var result = num.toFixed(2); // 1.23
```

在上述代码中，我们将num的小数部分保留2位，得到了一个四舍五入后的结果。

除了toFixed()方法之外，还有其他的方法可以实现四舍五入的功能，例如Math.round()、parseFloat()等等。根据实际情况，我们可以选择最适合自己的一种方法来处理数值类型过长的数据。

需要注意的是，在进行四舍五入时，我们应该尽量避免出现精度误差的问题。由于浮点数在计算机中表示的方式不同于我们在日常生活中所使用的方法，可能会导致一些小数无法精确表示。因此，在进行四舍五入时，我们需要考虑到这种情况，并采取一定的措施来避免精度误差的问题。 参考技术D Vue前端表格展示number类型太长数值四舍五入可能是因为数据太长，显示效果不美观，而四舍五入可以减少数字长度，使数据更易于阅读。另外，在处理金融数据等需要精确到小数点后几位的场景中，四舍五入也是常见的操作。

Vuex与前端表格施展“组合拳”，实现大屏展示应用的交互增强

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

下图是一个产品开发中非常常见的大屏展示界面示例。
通过Vue提供的Vuex，上方三个仪表板以及下方的表格组件共享同一个数据源，已经实现了数据改变后同步响应更新。

“很棒的大屏展示功能，能支持Excel数据的导入导出吗，表格数据可以实时编辑更新吗？”

如果你已经开发软件很长时间，可能不止一次地从最终客户或者产品经理那里听到过这个灵魂拷问。对于非技术人群来说，觉得要求 Excel 导入/导出/展示是一个非常正常且容易实现的需求。

但实际上，这个问题常常让前端开发人员感到恐惧。处理 Excel 文件需要大量工作。
这个问题通过前端表格可以变得简单，将电子表格嵌入Web 应用程序。同时和其他的组件进行交互。 这篇博客将研究如何使用现有的这个大屏展示 Vue 应用作为基础，使用前端电子表格对其进行增强。

本文假定你已经了解 HTML、CSS 和 JavaScript。以及Vue的基础应用。如果你有使用过Vuex ，当然会更容易理解，如果还没有，也不用担心。VueX在这个项目中的应用很简单。

关于VueX，可以在Vue官网了解更多信息

本文将分为下面的几个部分

• Vuex的原始应用
• 给应用添加实时编辑功能
• 添加 Excel 数据导入功能
• 添加导出为Excel功能

包含Vuex的原始应用
如上图看到的，将要使用的 Vue 应用程序是一个简单的大屏展示界面，带有几个汇总信息仪表板和一个数据表。

可以通过下面的附件获取这个Vue应用项目代码，然后运行“npm install”以及 “npm run serve”即可启动应用 。
附件下载地址：
https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjI1NzA1fDNkMDNjNjQ2fDE2NjAxMTUxMjF8NjI2NzZ8OTk3MTg%3D

原始的Vue 应用代码结构如下：

• Vuex 和 Vue 应用程序都定义在main.js中。
• 有几个单文件 Vue 组件，位于该components文件夹中。

Vuex store代码如下，初始状态只有一个设置为recentSales 的值，表示近期销售记录 ：

const store = new Vuex.Store(  
state:   
    recentSales  
    
);

通过recentSales这一个数据，如何生成三个统计表和一个表格？打开 Dashboard.vue 组件。在其中，可以看到基于 Vuex 存储中的数据生成了几个计算属性：

<template>
  <div style="background-color: #ddd">
    <NavBar title="销售仪表板"/>
    <div class="container">
      <div class="row">
        <TotalSales :total="totalSales"/>
        <SalesByCountry :salesData="countrySales"/>
        <SalesByPerson :salesData="personSales"/>
        <SalesTableBySpreadjs :tableData="salesTableData"/>
        <SalesTable :tableData="salesTableData"/>
        
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "./NavBar";
import TotalSales from "./TotalSales";
import SalesByCountry from "./SalesByCountry";
import SalesByPerson from "./SalesByPerson";
import SalesTable from "./SalesTable";
import SalesTableBySpreadjs from "./SalesTableBySpreadjs";
import  groupBySum  from "../util/util";

export default 
  components:  NavBar, SalesByCountry, SalesByPerson, SalesTable, TotalSales ,SalesTableBySpreadjs,
  computed: 
    totalSales() 
      const total = this.$store.state.recentSales.reduce(
        (acc, sale) => (acc += sale.value),
        0
      );
      return parseInt(total);
    ,
    countrySales() 
      const items = this.$store.state.recentSales;
      const groups = groupBySum(items, "country", "value");
      return groups;
    ,
    personSales() 
      const items = this.$store.state.recentSales;
      const groups = groupBySum(items, "soldBy", "value");
      return groups;
    ,
    salesTableData() 
      return this.$store.state.recentSales;
    
  
;
</script>

因此recentSales这个单个数据集目前能为这个大屏展示的几个仪表板和表格提供一致数据。由于数据位于Vuex store中，那么如果数据更新，所有仪表板面板都会自动更新。
当我们用可以编辑的电子表格替换现有的表格来进行编辑时，这种特性将派上用场。

将前端电子表格添加到您的 Vue 应用程序

我们要用前端电子表格替换这个html表格，在component文件夹新建一个vue文件，命名为SalesTableBySpreadjs.vue，然后在其中添加一个template：

<template>
  <TablePanel title="近期销售额">
    <gc-spread-sheets
      :hostClass="hostClass"
      @workbookInitialized="workbookInit"
      style="height: 300px"
    >
      <gc-worksheet
        :dataSource="tableData"
        :autoGenerateColumns="autoGenerateColumns"
      >
        <gc-column
          :width="50"
          :dataField="'id'"
          :headerText="'ID'"
          :visible="visible"
          :resizable="resizable"
        >
        </gc-column>
        <gc-column
          :width="300"
          :dataField="'client'"
          :headerText="'Client'"
          :visible="visible"
          :resizable="resizable"
        >
        </gc-column>
        <gc-column
          :width="350"
          :headerText="'Description'"
          :dataField="'description'"
          :visible="visible"
          :resizable="resizable"
        >
        </gc-column>
        <gc-column
          :width="100"
          :dataField="'value'"
          :headerText="'Value'"
          :visible="visible"
          :formatter="priceFormatter"
          :resizable="resizable"
        >
        </gc-column>
        <gc-column
          :width="100"
          :dataField="'itemCount'"
          :headerText="'Quantity'"
          :visible="visible"
          :resizable="resizable"
        >
        </gc-column>
        <gc-column
          :width="100"
          :dataField="'soldBy'"
          :headerText="'Sold By'"
          :visible="visible"
          :resizable="resizable"
        ></gc-column>
        <gc-column
          :width="100"
          :dataField="'country'"
          :headerText="'Country'"
          :visible="visible"
          :resizable="resizable"
        ></gc-column>
      </gc-worksheet>
    </gc-spread-sheets>
  </TablePanel>
</template>

其中，gc-spread-sheets元素创建了一个电子表格并定义了如何显示数据列。gc-column 中的dataField 属性告诉该列应该显示底层数据集的哪个属性。

接下来是js部分：

import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";

_// SpreadJS imports_  
import "@grapecity/spread-sheets-vue";  
import Excel from "@grapecity/spread-excelio";

import TablePanel from "./TablePanel";  
export default   
  components:  TablePanel ,  
  props: ["tableData"],  
  data()  
      return   
        hostClass:'spreadsheet',  
        autoGenerateColumns:true,  
        width:200,  
        visible:true,  
        resizable:true,  
        priceFormatter:"$ #.00"  
        
    ,  
  methods:   
      workbookInit: function(_spread_)   
        this._spread = spread;  
        
      
;

只需很少的代码即可完成。其中的几个数据属性和方法，是绑定到纯前端电子表格组件的配置选项，workbookInit 方法是SpreadJS在初始化工作表时调用的回调。

回到Dashboard.vue文件，加入刚刚创建的SalesTableBySpreadjs组件。
然后重新运行，即可显示电子表格数据：

<template>
  <div style="background-color: #ddd">
    <NavBar title="销售仪表板"/>
    <div class="container">
      <div class="row">
        <TotalSales :total="totalSales"/>
        <SalesByCountry :salesData="countrySales"/>
        <SalesByPerson :salesData="personSales"/>
        <SalesTableBySpreadjs :tableData="salesTableData"/>
<SalesTable :tableData="salesTableData"/>

        
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "./NavBar";
import TotalSales from "./TotalSales";
import SalesByCountry from "./SalesByCountry";
import SalesByPerson from "./SalesByPerson";
import SalesTable from "./SalesTable";
import SalesTableBySpreadjs from "./SalesTableBySpreadjs";
import  groupBySum  from "../util/util";

export default 
  components:  NavBar, SalesByCountry, SalesByPerson, SalesTable, TotalSales ,SalesTableBySpreadjs,
  computed: 
    totalSales() 
      const total = this.$store.state.recentSales.reduce(
        (acc, sale) => (acc += sale.value),
        0
      );
      return parseInt(total);
    ,
    countrySales() 
      const items = this.$store.state.recentSales;
      const groups = groupBySum(items, "country", "value");
      return groups;
    ,
    personSales() 
      const items = this.$store.state.recentSales;
      const groups = groupBySum(items, "soldBy", "value");
      return groups;
    ,
    salesTableData() 
      return this.$store.state.recentSales;
    
  
;
</script>

现在我们已经用一个完整的电子表格替换了原来的html table，接下来可以对电子表格中的金额列中显示的金额进行编辑。比如将第6行的金额从 35,000 美元更改为 3500 美元，可以看到上面三个仪表板显示的内容同时也进行了更新。

原因是SpreadJS被编辑后同步更新了它的数据源=>VUEX store中的recentSales。

到这里我们已经有了一个可以随着数据变化而实时更新的增强型仪表板。下一步我们可以通过导出导入 Excel 数据的功能来做进一步增强。

导出为Excel文件

将 Excel 导出功能添加到工作表很容易。首先，在仪表板中添加一个导出按钮。把它放在表格面板的底部，在 gc-spread-sheets 结束标记之后：

 </gc-spread-sheets>  
    <div class="row my-3">
      <div class="col-sm-4">
        <button class="btn btn-primary mr-3" @click="exportSheet">
          导出文件
        </button>
      </div>
    </div>
  </TablePanel>  
</template>

接下来添加点击时触发的 exportSheet方法，从名为 file-saver 的 NPM 包中导入一个函数：

import  saveAs  from 'file-saver';

然后将 exportSheet 添加到组件的方法对象中：

exportSheet: function () 
      const spread = this._spread;
      const fileName = "SalesData.xlsx";
      //const sheet = spread.getSheet(0);
      const excelIO = new IO();
      const json = JSON.stringify(
        spread.toJSON(
          includeBindingSource: true,
          columnHeadersAsFrozenRows: true,
        )
      );
      excelIO.save(
        json,
        function (blob) 
          saveAs(blob, fileName);
        ,
        function (e) 
          console.log(e);
        
      );
    ,

运行测试点击按钮，即可直接获取到导出的excel文件。
需要注意的是，我们设置了两个序列化选项：includeBindingSource 和 columnHeadersAsFrozenRows。以确保绑定到工作表的数据被正确导出，且工作表包含列标题，。

Excel 数据导入

在template中，添加以下代码添加一个file类型的input用于导入文件：

<div class="col-sm-8">
        <button class="btn btn-primary float-end mx-2">导入文件</button>
        <input
          type="file"
          class="fileSelect float-end mt-1"
          @change="fileChange($event)"
        />
</div>

然后将fileChange方法添加到组件的method对象中：

fileChange: function (e) 
      if (this._spread) 
        const fileDom = e.target || e.srcElement;
        const excelIO = new IO();
        //const spread = this._spread;
        const store = this.$store;

        excelIO.open(fileDom.files[0], (data) => 
          const newSalesData = extractSheetData(data);

          store.commit("updateRecentSales", newSalesData);
        );
      
    ,

选择文件后，使用SpreadJS中的 ExcelIO 导入它。获取其中的json数据。传入自定义的函数extractSheetData，从中提取需要的数据，然后将其提交回 Vuex store,来更新recentSales数据。

extractSheetData 函数可以在 src/util.util.js 文件中找到。extractSheetData函数假定导入工作表中的数据与原始数据集具有相同的列。如果有人上传的电子表格不符合此要求，将无法解析。这个应该是大多数客户可以接受的限制。数据不符时，也可以尝试给客户一个提示信息。

另外，还需要在main.js中为Vuex store添加updateRecentSales来更新数据，
修改后的store如下：

const store = new Vuex.Store(
  state: 
    recentSales
  ,
  mutations: 
    updateRecentSales (state,param) 
      
      let sales=state.recentSales;
      let arr=sales.map(function(o)return o.id);
      param.forEach((newsale)=>
          if(arr.indexOf(newsale.id)>0)
            console.log("update");
            state.recentSales[arr.indexOf(newsale.id)]=newsale;
          
          else
            console.log("add");
            state.recentSales.push(newsale);
          
      );
      console.log(state.recentSales);
    
  ,
  actions: 
    updateRecentSales (commit,param) 
      commit('updateRecentSales',param)
    
  
);

可以看到，Vuex store调用 commit后，会触发updateRecentSales方法对recentSales进行更新，id相同时进行更新， 有新的id时进行新增。
最后，SpreadJS工作表和所有仪表板面板都会同步更新以反映新数据。

最终的项目下载地址：
https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjI1NzA2fDcxYzkxZjZmfDE2NjAxMTUxMjF8NjI2NzZ8OTk3MTg%3D

Vue、Vuex 和 SpreadJS 的配合使用让这个应用的增强开发变的非常方便。借助 Vue 的模板和数据绑定、Vuex 的管理共享状态，响应式数据存储和纯前端的交互式电子表格，可以在很短内创建复杂的企业 JavaScript 应用程序。

大家如果感兴趣可以访问更多在线实例：
https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html