vue3 封装table

### 回答1：
Vue3 的封装 Table 可以使用 `defineComponent` 和 `ref` 来实现。以下是一个简单的例子：

<template>
  <table class="table">
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="(value, key) in row" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

export default defineComponent({
  props: {
    headers: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const headers = ref(props.headers);
    const data = ref(props.data);

    return {
      headers,
      data,
    };
  },
});
</script>

在这个例子中，我们定义了两个 props：`headers` 和 `data`，分别表示表格的列头和数据。在 setup 函数中，我们使用 `ref` 将这两个 props 转化为响应式数据。在模板中，我们使用 `v-for` 渲染表头和数据。

### 回答2：
Vue3 封装 Table 是一种将表格组件进行抽象和封装，以便在项目中复用的技巧。

首先，我们可以通过 Vue 的组件开发方式来创建一个 Table 组件。在组件中，我们可以定义表格的数据源，表头信息以及表格样式等。

接下来，我们可以在组件中使用 Vue3 的 Composition API 来定义一些功能函数，例如：排序、筛选、分页等。这些功能函数可以根据不同的需求进行扩展和定制，使得 Table 组件更加灵活和易用。

在渲染表格时，我们可以使用 v-for 指令遍历数据源，并根据表头信息动态生成表格的列。同时，根据需要，我们可以使用 v-bind 指令动态绑定表格的样式和类名，以实现样式定制和多样化的展示效果。

此外，我们还可以为 Table 组件增加一些交互功能，例如：点击表头排序、点击某一行获取详情等。这些交互功能可以通过自定义事件（Event）来实现，使得 Table 组件可以更好地与其他组件进行配合和集成。

最后，封装好的 Table 组件可以在项目中进行复用，通过简单地传入不同的数据源和表头配置，就可以实现不同的表格展示效果。同时，我们也可以通过插槽（Slot）机制，让 Table 组件更加灵活地支持自定义的内容展示和布局。

总结起来，通过合理地利用 Vue3 的组件化特性和 Composition API，我们可以封装一个灵活、易用且可复用的 Table 组件，帮助我们更高效地完成项目开发中的表格展示需求。