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> 中去除小数并使用千分号格式化数字。选择最适合你项目需求的方法。

相关推荐
Java 码农43 分钟前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan1 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown1 小时前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js
胡gh1 小时前
数组开会:splice说它要动刀,map说它只想看看。
javascript·后端·面试
TimelessHaze2 小时前
🔥 一文掌握 JavaScript 数组方法(2025 全面指南):分类解析 × 业务场景 × 易错点
前端·javascript·trae
EndingCoder3 小时前
React 19 与 Next.js:利用最新 React 功能
前端·javascript·后端·react.js·前端框架·全栈·next.js
前端赵哈哈3 小时前
Vite 图片压缩的 4 种有效方法
前端·vue.js·vite
ITMan彪叔3 小时前
Nodejs打包 Webpack 中 __dirname 的正确配置与行为解析
javascript·后端
风中凌乱的L4 小时前
vue 一键打包上传
前端·javascript·vue.js
GHOME4 小时前
Vue2与Vue3响应式原理对比
前端·vue.js·面试