封装一个element-ui table组件，实现传入一个字段名数组，根据字段名显示出对应的table

以下是封装的element-ui table组件示例代码：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column v-for="field in fields" :key="field" :prop="field" :label="field"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    fields: {
      type: Array,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    }
  }
};
</script>

在父组件中使用该封装组件，传入字段名数组和table数据即可：

<template>
  <div>
    <my-table :fields="fields" :table-data="tableData"></my-table>
  </div>
</template>

<script>
import MyTable from "@/components/MyTable.vue";

export default {
  data() {
    return {
      fields: ["name", "age", "gender"],
      tableData: [
        { name: "Tom", age: 20, gender: "male" },
        { name: "Lucy", age: 18, gender: "female" },
        { name: "Jack", age: 22, gender: "male" }
      ]
    };
  },
  components: {
    MyTable
  }
};
</script>

这样就可以根据传入的字段名数组动态生成对应的表头，并显示出对应的table数据了。