vue 给不同组件数据添加千分位符且保留两位小数
方法一：使用filter过滤器的方法给普通元素添加千分位符且保留两位小数
<template> <div class="app-container"> {{ obj | modifyObject }} {{ obj1 | modifyObject }} </div> </template> <script> export default { components: {}, data () { return { obj: '30000.0000', obj1: '哈哈哈' } }, filters: { modifyObject (obj) { let numStr = obj.indexOf('.') > 0 ? (obj * 1).toFixed(2) : obj; let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,'); return thousandSeparated; }, }, mounted () { }, methods: { } } </script>
方法一之给table某个数据通过fileter方式添加千分位符且保留两位小数
<template> <div class="app-container"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> <template slot-scope="{row}"> <span>{{row.address | rbstateFormat}}</span> </template> </el-table-column> </el-table> </div> </template> <script> export default { components: {}, data () { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '300000.000' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } }, mounted () { }, filters: { // 金额千分位 rbstateFormat (row, column, cellValue) { console.log(row, '==='); let numStr = row.indexOf('.') > 0 ? (row * 1).toFixed(2) : row; let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,'); return thousandSeparated; }, }, methods: { } } </script>
方法二：给table某一个数据通过Vue数据格式化，:formatter的使用
<template> <div class="app-container"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" :formatter="rbstateFormat" label="地址"> </el-table-column> </el-table> </div> </template> <script> export default { components: {}, data () { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '300000.000' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } }, mounted () { }, methods: { // 金额千分位 rbstateFormat (row, column, cellValue) { let numStr = cellValue.indexOf('.') > 0 ? (cellValue * 1).toFixed(2) : cellValue; let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,'); return thousandSeparated; }, } } </script>
方法三：动态表格进行判断返回数据，对数值型数据添加千分位符且保留两位小数
方法一：使用filter过滤器的方法给普通元素添加千分位符且保留两位小数
<template>
<div class="app-container">
{{ obj | modifyObject }}
{{ obj1 | modifyObject }}
</div>
</template>
<script>
export default {
components: {},
data () {
return {
obj: '30000.0000',
obj1: '哈哈哈'
}
},
filters: {
modifyObject (obj) {
let numStr = obj.indexOf('.') > 0 ? (obj * 1).toFixed(2) : obj;
let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,');
return thousandSeparated;
},
},
mounted () {
},
methods: {
}
}
</script>
方法一之给table某个数据通过fileter方式添加千分位符且保留两位小数
<template>
<div class="app-container">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
<template slot-scope="{row}">
<span>{{row.address | rbstateFormat}}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '300000.000'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
mounted () {
},
filters: {
// 金额千分位
rbstateFormat (row, column, cellValue) {
console.log(row, '===');
let numStr = row.indexOf('.') > 0 ? (row * 1).toFixed(2) : row;
let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,');
return thousandSeparated;
},
},
methods: {
}
}
</script>
方法二：给table某一个数据通过Vue数据格式化，:formatter的使用
<template>
<div class="app-container">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" :formatter="rbstateFormat" label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '300000.000'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
mounted () {
},
methods: {
// 金额千分位
rbstateFormat (row, column, cellValue) {
let numStr = cellValue.indexOf('.') > 0 ? (cellValue * 1).toFixed(2) : cellValue;
let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,');
return thousandSeparated;
},
}
}
</script>
方法三：动态表格进行判断返回数据，对数值型数据添加千分位符且保留两位小数
<template>
<div class="app-container">
<el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
<el-table-column label="2024-01" prop="2024-01">
</el-table-column>
<el-table-column label="2024-02" prop="2024-02">
</el-table-column>
<el-table-column align="right">
<template slot="header" slot-scope="scope">
<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
</template>
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
tableData: [
{
"2024-01": "0.261",
"2024-02": "0.461",
"2024-03": "0.563",
"主要加班单位": "加班日期及小时数88"
},
{
"2024-01": "443335.899",
"2024-02": "443335.8990",
"2024-03": "443335.899",
"主要加班单位": "加班日期及小时数77"
},
{
"2024-01": "443335.899",
"2024-02": "10884.267443335",
"2024-03": "443335.899",
"主要加班单位": "加班日期及小时数66"
},
{
"2024-01": "1549.23",
"2024-02": "1923.26",
"2024-03": "19.09",
"主要加班单位": "加班日期及小时数55"
},
{
"2024-01": "3543.46",
"2024-02": "545421.32",
"2024-03": "3945.22",
"主要加班单位": "加班日期及小时数44"
},
{
"2024-01": "454.26",
"2024-02": "3487.24",
"2024-03": "48797.34",
"主要加班单位": "加班日期及小时数33"
},
{
"2024-01": "5544.65",
"2024-02": "98986.00",
"2024-03": "886766.05",
"主要加班单位": "加班日期及小时数22"
},
{
"2024-01": "",
"2024-02": "",
"2024-03": "",
"主要加班单位": "加班日期及小时数11"
}
],
search: ''
}
},
mounted () {
this.getDataList()
},
methods: {
getDataList () {
this.tableData.forEach(item => {
this.modifyObject(item)
});
},
modifyObject (obj) {
for (let key in obj) {
if (obj.hasOwnProperty(key)) { // 确保是对象自有属性，不是原型链上的属性
// 使用正则表达式添加千分位符和保留两位小数
let numStr = obj[key].indexOf('.') > 0 ? (obj[key] * 1).toFixed(2) : obj[key];
let thousandSeparated = numStr.replace(/\d(?=(\d{3})+\.)/g, '$&,');
// console.log(thousandSeparated,'thousandSeparated');
obj[key] = thousandSeparated; // 修改属性的值
}
}
return obj; // 返回修改后的对象
},
}
}
</script>
是我吖~
浙公网安备 33010602011771号