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

dangsh_

于 2020-07-13 11:52:28 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： html vue element

本文链接：https://blog.youkuaiyun.com/dangsh_/article/details/107314166

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能如：
后端返回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(/\.$/, '')
      },