Vue3 + TS + Element-Plus 封装的 Table 表格组件

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label">
    </el-table-column>
  </el-table>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
 
interface TableColumn {
  prop: string;
  label: string;
}
 
export default defineComponent({
  name: 'MyTable',
  components: {
    ElTable,
    ElTableColumn
  },
  props: {
    columns: {
      type: Array as () => TableColumn[],
      required: true
    },
    tableData: {
      type: Array,
      required: true
    }
  }
});
</script>

这个简单的例子展示了如何在Vue 3和TypeScript中使用Element-Plus创建一个可以动态渲染列的表格组件。组件接收columns和tableData作为props，其中columns是一个对象数组，定义了表格列的属性和标签。tableData是表格的数据数组。这个组件可以被其他Vue组件作为自定义表格来使用。