element 表格组件封装带格式化

你可以使用 Element UI 中的 Table 组件来创建表格，并使用其中的 formatter 属性来进行格式化。下面是一个示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age" :formatter="formatAge"></el-table-column>
    <el-table-column prop="gender" label="Gender"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, gender: 'Male' },
        { name: 'Jane', age: 30, gender: 'Female' },
        { name: 'Tom', age: 20, gender: 'Male' }
      ]
    };
  },
  methods: {
    formatAge(row, column) {
      return row.age + ' years old';
    }
  }
};
</script>

在这个示例中，我们使用了 `formatter` 属性来指定格式化函数 `formatAge`。在 `formatAge` 函数中，我们将年龄后面添加了字符串 " years old"。这样，表格中的年龄列就会显示为格式化后的值。

你可以根据自己的需求修改 `formatAge` 函数，实现自定义的格式化逻辑。