vue3 el-table 去除小数

在 Vue 3 中使用 Element Plus 的 <el-table> 组件时，如果你希望去除表格列中的小数，你可以通过几种方式来实现：

1. 使用 formatter 属性

<el-table-column> 组件的 formatter 属性允许你自定义单元格的显示格式。你可以使用这个属性来格式化数据，去除小数。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="amount" label="Amount" :formatter="formatAmount"></el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  { id: 1, name: 'Item 1', amount: 123.45 },
  { id: 2, name: 'Item 2', amount: 67.89 },
  { id: 3, name: 'Item 3', amount: 10.11 }
]);
 
const formatAmount = (row, column, cellValue, index) => {
  return Math.floor(cellValue); // 去除小数，向下取整
};
</script>

2. 使用计算属性或方法

如果你不想在模板中使用复杂的逻辑，你可以在组件的 setup 方法中使用计算属性或方法来处理数据。

<template>
  <el-table :data="processedTableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="amount" label="Amount"></el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref, computed } from 'vue';
 
const tableData = ref([
  { id: 1, name: 'Item 1', amount: 123.45 },
  { id: 2, name: 'Item 2', amount: 67.89 },
  { id: 3, name: 'Item 3', amount: 10.11 }
]);
 
const processedTableData = computed(() => {
  return tableData.value.map(item => ({
    ...item,
    amount: Math.floor(item.amount) // 去除小数，向下取整
  }));
});
</script>

3. 直接修改数据源（不推荐）

虽然直接修改数据源可以达到目的，但这通常不是最佳实践，因为它违反了响应式数据更新的原则。更好的方式是使用上述的 formatter 或计算属性方法。但如果你确实需要在数据加载到表格之前就处理这些数据，你可以这样做：

tableData.value = tableData.value.map(item => ({
  ...item,
  amount: Math.floor(item.amount) // 在这里处理数据
}));

推荐使用 formatter 属性或计算属性方法来处理显示格式，这样可以保持数据的响应式和组件的清晰度。直接修改数据源虽然在某些情况下可行，但不是最佳实践。