element-ui el-table 添加数字千位分割

最新推荐文章于 2023-05-23 15:29:51 发布

原创最新推荐文章于 2023-05-23 15:29:51 发布 · 5.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#el-table #数字千位分割

vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

前端UI（PC）

1 篇文章

订阅专栏

本文介绍如何使用Vue中的El-Table组件实现注册资金列的数据格式化，通过自定义的stateFormat函数，将数字添加千位分隔符。

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

html
在需要添加分割号的地方:formatter="stateFormat"

 <el-table stripe ref="multipleTable" :data="tableData"  tooltip-effect="dark" style="width: 100%">
      <el-table-column label="注册资金" prop="registeredCapital" :formatter="stateFormat"  show-overflow-tooltip></el-table-column>
 </el-table>

js
在module里面添加如下代码片段

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

在这里插入图片描述