vue3怎么封装一个表格

你可以使用 Vue 3 的组件化特性来封装一个表格。下面是一个简单的示例：

1. 创建一个名为 Table.vue 的组件文件，并在其中定义表格的结构和样式。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column">{{ column }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <td v-for="column in columns" :key="column">{{ item[column] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}
</style>

2. 在父组件中使用 Table 组件，并传递列名和数据作为 props。

<template>
  <div>
    <table :columns="tableColumns" :data="tableData" />
  </div>
</template>

<script>
import Table from './Table.vue';

export default {
  components: {
    Table
  },
  data() {
    return {
      tableColumns: ['Name', 'Age', 'City'],
      tableData: [
        { id: 1, Name: 'John Doe', Age: 25, City: 'New York' },
        { id: 2, Name: 'Jane Smith', Age: 30, City: 'San Francisco' },
        { id: 3, Name: 'Bob Johnson', Age: 35, City: 'Los Angeles' }
      ]
    }
  }
}
</script>

这样，你就可以通过在父组件中定义列名和数据，来动态地渲染一个表格。你可以根据实际需求，进一步扩展 Table 组件，比如添加排序、分页等功能。