vue3封装table 用到作用域插槽

对于Vue 3中的封装Table组件，并使用作用域插槽的功能，可以按照以下步骤进行操作：

1. 创建一个Table组件：

   <template>
     <table>
       <tr>
         <th v-for="column in columns" :key="column">{{ column }}</th>
       </tr>
       <tr v-for="item in data" :key="item.id">
         <!-- 使用作用域插槽传递数据给插槽内容 -->
         <slot :item="item"></slot>
       </tr>
     </table>
   </template>
   
   <script>
   export default {
     props: {
       columns: Array,
       data: Array,
     },
   };
   </script>

2. 在使用Table组件的父组件中，可以通过作用域插槽向Table组件中传递数据并渲染：

   <template>
     <table-component :columns="columns" :data="data">
       <!-- 使用作用域插槽接收传递的数据 -->
       <template v-slot="{ item }">
         <td>{{ item.name }}</td>
         <td>{{ item.age }}</td>
         <!-- 其他列 -->
       </template>
     </table-component>
   </template>
   
   <script>
   import TableComponent from './TableComponent.vue';
   
   export default {
     components: {
       TableComponent,
     },
     data() {
       return {
         columns: ['Name', 'Age'], // 列名
         data: [
           { id: 1, name: 'John', age: 25 },
           { id: 2, name: 'Jane', age: 28 },
           // 其他数据
         ],
       };
     },
   };
   </script>

通过以上步骤，你可以在Vue 3中封装一个具有作用域插槽功能的Table组件，并在父组件中动态传递数据给插槽内容进行渲染。