千分位过滤器

最新推荐文章于 2024-11-12 16:34:34 发布

kurcp

最新推荐文章于 2024-11-12 16:34:34 发布

阅读量179

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_59570698/article/details/129366267

版权

创建了一个名为formatToThousands的函数，该函数在util.js中定义并导出，用于在数字后添加千分位分隔符。在main.js中引入此函数并挂载到Vue原型上，使得在项目中的任何组件都能使用。在el-table-column中通过插槽使用此过滤器展示带有千分位的数值。

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

全局应用千分位过滤器

新建util.js

export const formatToThousands = (num) => {
    num = num + ''
    if (!num.includes('.')) {
        num += '.'
    }
    return num.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
        return $1 + ','
    }).replace(/\.$/, '')
}

在main.js中引用

import { formatToThousands } from './utils/util'
Vue.prototype.formatToThousands = formatToThousands

在项目中使用

<el-table-column prop="num" label="数量" :show-overflow-tooltip="true">
    <template slot-scope="scope">
          <span>{{formatToThousands(scope.row.num)}}</span>
    </template>
</el-table-column>