vue3+ts封装table组件并注册发布

在Vue 3和TypeScript环境下，可以创建一个封装了表格（table）的组件，并通过Vue的插件系统注册和发布。以下是一个简单的示例：

1. 创建一个Table组件（TableComponent.vue）：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="key in row" :key="key">{{ row[key] }}</td>
      </tr>
    </tbody>
  </table>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'TableComponent',
  props: {
    headers: Array,
    rows: Array
  }
});
</script>

2. 创建插件文件（table-plugin.ts）：

import TableComponent from './TableComponent.vue';
 
export default {
  install: (app) => {
    app.component('TableComponent', TableComponent);
  }
};

3. 在主文件（main.ts）中注册插件：

import { createApp } from 'vue';
import App from './App.vue';
import tablePlugin from './table-plugin';
 
const app = createApp(App);
app.use(tablePlugin);
app.mount('#app');

4. 使用TableComponent组件（在App.vue中）：

<template>
  <div id="app">
    <TableComponent :headers="['Name', 'Age', 'Email']" :rows="tableData" />
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'App',
  data() {
    return {
      tableData: [
        { id: 1, Name: 'John Doe', Age: 30, Email: 'john@example.com' },
        { id: 2, Name: 'Jane Doe', Age: 25, Email: 'jane@example.com' }
      ]
    };
  }
});
</script>

这样，你就创建了一个可以在Vue应用中注册和使用的Table组件。通过这个示例，开发者可以学习如何在Vue 3和TypeScript中创建和使用自定义组件。