vue3 el-table 去除小数

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

1. 使用 formatter 属性

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

      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); // 去除小数，向下取整};

2. 使用计算属性或方法

如果你不想在模板中使用复杂的逻辑，你可以在组件的 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) // 去除小数，向下取整 }));});

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

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

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

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