vue3 el-table 去除小数 并使用千分号

在 Vue 3 中使用 Element Plus 的 <el-table> 组件时,如果你想在表格的某个列中去除小数并使用千分号来格式化数字,你可以通过以下几种方式实现:

方法 1:使用自定义列模板

你可以通过定义一个自定义的列模板来格式化数字。这种方法允许你完全控制如何显示数据。

复制代码
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column label="金额">
      <template #default="scope">
        {{ formatNumber(scope.row.amount) }}
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  { date: '2023-04-01', amount: 12345.67 },
  { date: '2023-04-02', amount: 98765.43 },
  // 更多数据...
]);
 
function formatNumber(value) {
  if (!value) return '';
  const num = Math.round(value); // 去除小数
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 添加千分号
}
</script>

方法 2:使用计算属性或方法格式化数据

如果你希望在数据传递给表格之前就进行格式化,你可以在数据源对象上添加一个计算属性或方法,然后在表格中使用这个属性或方法。

复制代码
<template>
  <el-table :data="formattedTableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="formattedAmount" label="金额" />
  </el-table>
</template>
 
<script setup>
import { computed, ref } from 'vue';
 
const tableData = ref([
  { date: '2023-04-01', amount: 12345.67 },
  { date: '2023-04-02', amount: 98765.43 },
  // 更多数据...
]);
 
const formattedTableData = computed(() => {
  return tableData.value.map(item => ({
    ...item,
    formattedAmount: formatNumber(item.amount)
  }));
});
 
function formatNumber(value) {
  if (!value) return '';
  const num = Math.round(value); // 去除小数
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 添加千分号
}
</script>

方法 3:使用过滤器(如果你在使用 Vue 2 或 Vue 3 的 Composition API 但想保持类似 Vue 2 的语法风格)

虽然 Vue 3 不再支持全局过滤器,但你可以通过创建一个函数并直接在模板中调用它来模拟过滤器的行为。上面的方法 1 和方法 2 已经展示了如何在 Vue 3 中实现这一点。如果你确实想保持类似 Vue 2 的语法风格,可以封装一个函数并在模板中使用它。但通常推荐使用计算属性或方法,因为它们在 Vue 3 中更为自然和强大。

以上方法都可以帮助你在 Element Plus 的 <el-table> 中去除小数并使用千分号格式化数字。选择最适合你项目需求的方法。

相关推荐
han_30 分钟前
前端遇到页面卡顿问题,如何排查和解决?
前端·javascript·性能优化
changuncle2 小时前
Angular初学者入门第一课——搭建并改造项目(精品)
javascript·ecmascript·angular.js
漫天星梦3 小时前
Vue2项目搭建(Layout布局、全局样式、VueX、Vue Router、axios封装)
前端·vue.js
星光不问赶路人4 小时前
TypeScript 模块扩展
vue.js·typescript
中等生4 小时前
一文搞懂 JavaScript 原型和原型链
前端·javascript
黑椒牛肉焖饭4 小时前
web第一次作业
前端·javascript·html
柏成5 小时前
qiankun 微前端框架🐳
前端·javascript·vue.js
穷小白5 小时前
Vue3与Ue通信
前端·javascript
柏成5 小时前
qiankun 源码解析🐳
前端·javascript·面试