前端 - 如何封装好一个element表格，实现组件复用，并可以父子传值？

Question

想封装一个表格，以便复用，在每个父组件引用时，可以根据每个父组件要渲染的数据动态更新表格内容

Answer 1

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(column, index) in columns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'CustomTable',
  props: {
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    }
  }
}
</script>