vue Element-Ui中table表中数字保留两位小数

最新推荐文章于 2024-01-29 17:06:00 发布

土豆程序媛

最新推荐文章于 2024-01-29 17:06:00 发布

阅读量1w

点赞数 12

分类专栏： vue JavaScript 文章标签： vue.js javascript 前端

原文链接：https://www.cnblogs.com/ssjd/p/14927075.html；https://www.icode9.com/content-4-822642.html

版权

vue 同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

JavaScript

18 篇文章 0 订阅

订阅专栏

本文介绍了如何在Element-UI表格中实现数字的格式化，包括保留两位小数、四舍五入以及将小数转换为百分比，并提供了相应的函数示例。通过fun(), functionChangeDecimalToPercentage()和numFilter()方法，优化了表格数据的展示效果。

摘要由CSDN通过智能技术生成

在element-ui表格中使用

1、达到table表格中有小数的num显示2位小数

<el-table-column
    prop="testValue"
    label="信息"
    align="center">
    <template slot-scope="scope">
       {{ fun(scope.row.testValue) }}
    </template>
</el-table-column>

methods: {
　　fun(val){
　　　　return Number(val).toFixed(2);
　　},
}

原文链接https://www.cnblogs.com/ssjd/p/14927075.html
2、将小数转化为百分比（保留四位小数，四舍五入）

function ChangeDecimalToPercentage(data) {
  var data1 = (data*100).toFixed(4)+"%"
  return data1
}

3、保留小数点后两位四舍五入

function NumFilter (value) {
  // 截取当前数据到小数点后两位
  let realVal = parseFloat(value).toFixed(2)
  return realVal
}

4、留两位小数不四舍五入

function numFilter (value) {
  // 截取当前数据到小数点后三位
  let tempVal = parseFloat(value).toFixed(3)
  let realVal = tempVal.substring(0, tempVal.length - 1)
  return realVal
}