Vue3:封装Table 表格组件

<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :sortable="column.sortable"
      ></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  name: 'MyTable',
  props: {
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true,
      validator: columns => columns.every(column => 'prop' in column && 'label' in column)
    }
  }
}
</script>
 
<style scoped>
.table-container {
  margin-top: 10px;
}
</style>

这个简单的Vue 3组件使用了Element UI的el-table和el-table-column组件来创建一个表格。组件接收tableData和columns作为props，其中tableData是表格数据数组，而columns定义了表格列的相关信息。这个组件可以被用来展示各种数据表，并且可以通过props灵活配置列信息。