vue3 封装table

Vue 3 的封装 Table 可以使用 Composition API 来实现。下面是基本的 Table 封装，你可以根据自己的需求进行修改和扩展。

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

<script>
import { ref } from 'vue';

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

在上面的代码中，我们使用了 `ref` 来创建了响应式的 `columns` 和 `rows`。在 `template` 标签中，我们遍历了 `columns` 和 `rows`，生成了一个基本的表格。你可以根据你的需求来修改表格的样式和内容。

下面是一个使用该 Table 组件的例子：

<template>
  <div>
    <Table :columns="columns" :rows="rows" />
  </div>
</template>

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

export default {
  components: {
    Table,
  },
  data() {
    return {
      columns: [
        { label: 'ID', field: 'id' },
        { label: 'Name', field: 'name' },
        { label: 'Age', field: 'age' },
      ],
      rows: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Mary', age: 30 },
        { id: 3, name: 'Tom', age: 35 },
      ],
    };
  },
};
</script>

在上面的代码中，我们先引入了 `Table` 组件，然后在 `data` 中定义了 `columns` 和 `rows`，并将它们传递给了 `Table` 组件。你可以根据自己的需求来修改表格的数据。