element-ui 为＜el-table＞内数据添加数字千位分割符

因用若依做后台管理脚手架，所以首先把以下方法写在Utils文件夹下的 ruoyi.js 里

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

这个会在整数数字后添加 .00

//金额千分符会在整数后添加两个0

export function stateFormat(row, column, cellValue) {

if (cellValue) {

return Number(cellValue)

.toFixed(2)

.replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {

return $1 + ",";

})

.replace(/\.$/, "");

}

第二步需要在 main.js 文件里进行全局方法的挂载

import { stateFormat} from "@/utils/ruoyi";

// 全局方法挂载

　Vue.prototype.stateFormat = stateFormat

最后可以在需要用到的表格中使用

 <el-table-columnlabel="考核金额"align="center"prop="kpiAmount":formatter="stateFormat"  //在需要进行千位分割的表格中使用即可:show-overflow-tooltip="true"/>

element-ui 为＜el-table＞内数据添加数字千位分割符相关推荐

VUE element-ui之table表格内容添加千位分割符/货币格式
步骤: 定义转换方法 <el-table-column prop="regDayToNow" label="距离注册时间(天)" width=" ...
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
前端笔记-在Element UI中表格如何根据数据动态变化显示
前言实际上我需要的功能类似于前端工程中的字典.由于在前端的学习自己写代码的过程中可能不会对一个项目工程化的如此的彻底,所以这里给出了一种解决方法. 需求对于Element UI里的表格,如果假设传 ...
el vue 手机号_Vue实现数字输入框中分割手机号码实例教程
本文主要介绍了Vue实现数字输入框中分割手机号码的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 需求在移动端弹出系统数字键盘,输入手机号码的时 ...
使用element UI时，table表格插入input输入框后里面的内容无法编辑问题
其实此处打的问题是内容已经被修改了,但是table表格因为没有更新数据,所以看起来像是没有修改成功此处可以添加给对应的input标签添加@input="onExchange(scope.$ ...
vue2.0的Element UI的表格table列时间戳格式化
表格属性 [html] view plain copy <el-table :data="tableData" v-loading.body="loading&qu ...
Element ui 中的tree 在数据前面添加自定义图标
可以使用 el-tree 标签实现在节点区添加按钮或图标等内容也可以通过class来自定义图标 <template><div class="my-tree-main&q ...
Element UI的表格table列的宽度自适应设置
不要设置 width="110px" <el-table-column prop="login_id" align="center" ...
element ui 日期选择器选择日期范围添加默认值
标签 <el-date-pickerv-model="dateValue"type="daterange"align="right"u ...

element-ui 为＜el-table＞内数据添加数字千位分割符

element-ui 为＜el-table＞内数据添加数字千位分割符相关推荐

最新文章

热门文章

element-ui 为＜el-table＞内数据 添加数字千位分割符

element-ui 为＜el-table＞内数据 添加数字千位分割符相关推荐

最新文章

热门文章

element-ui 为＜el-table＞内数据添加数字千位分割符

element-ui 为＜el-table＞内数据添加数字千位分割符相关推荐