Element Vue el-table组件内容的千位分隔

最新推荐文章于 2025-03-19 08:01:48 发布

原创最新推荐文章于 2025-03-19 08:01:48 发布 · 3.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue #element

本文介绍如何使用Element UI的表格组件，通过自定义formatter函数实现数据的千位分隔显示，例如将数字1234显示为1，234。

实现功能如：
后端返回1234
表格中显示为1，234
贴一下官方文档地址
https://element.eleme.cn/#/zh-CN/component/table

在这里插入图片描述

在官网中这样提到

<el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>

methods: {
      formatter(row, column) {
        return row.address;
      }
    }

这边改为
给需要转换的el-table-column 加上

:formatter="stateFormat"

stateFormat (row, column, cellValue) {
        cellValue += ''
        if (!cellValue.includes('.')) cellValue += '.'
        return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
          return $1 + ','
        }).replace(/\.$/, '')
      },