VUE 保留四位小数

最新推荐文章于 2025-05-26 18:38:16 发布

原创最新推荐文章于 2025-05-26 18:38:16 发布 · 3.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

这篇博客介绍了如何在Vue中创建并应用过滤器来保留数值的特定小数位数。示例展示了如何定义名为`keepNumber`的过滤器，用于将数值四舍五入到第五位小数，并处理非数字值的情况。该过滤器在表格列中展示长度数据时被应用。

使用
<el-table-column label="长度(m)" align="center" prop="length" width="128">
        <template slot-scope="scope">
          <span>{{ scope.row.length | keepNumber }}</span>
        </template>
      </el-table-column>

注意，filters: 是单独的。不存放在methods：里

  filters: {
    keepNumber(value) { //过滤器保留4为小数
      const numM = Number(value).toFixed(5);
      if (numM === "NaN") {
        return "0.0000";
      }
      const realVal = numM.substring(0, numM.length - 1);
      return realVal;
    },
  },