在 Vue 3 中，您可以使用 el-table 的 formatter 插槽来对表格中的数据进行格式化。通过 formatter 插槽，您可以自定义每个单元格的显示内容。
以下是一个示例，演示如何在 Vue 3 中对 el-table 表格中的数据进行格式化：
<template>
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄">
<template v-slot:default="scope">
{{ formatAge(scope.row.age) }}
</template>
</el-table-column>
<el-table-column label="邮箱">
<template v-slot:default="scope">
{{ formatEmail(scope.row.email) }}
</template>
</el-table-column>
<!-- 其他列定义 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 25, email: 'zhangsan@example.com' },
{ name: '李四', age: 30, email: 'lisi@example.com' },
// 其他数据
],
// 其他数据属性
};
},
methods: {
formatAge(age) {
// 在这里对年龄进行格式化处理，例如添加单位
return age + '岁';
},
formatEmail(email) {
// 在这里对邮箱进行格式化处理，例如隐藏部分信息
return email.replace(/^(.{3})(.*)(@.*)$/, "$1****$3");
},
// 其他方法和钩子函数
},
};
</script>在这个示例中，我们使用了 v-slot:default 指令来定义 el-table-column 的 formatter 插槽。通过 scope.row 可以访问到每个单元格的数据，然后将数据传递给相应的格式化方法进行处理。
通过这种方式，您可以在 Vue 3 中灵活地对 el-table 表格中的数据进行格式化，以满足您的显示需求。
