vue3 +ts 移动端基于原生table表格封装一个table表格 表头对应列的内容可通过插槽来配置值 有操作列 操作列当中的内容需要通过具名插槽直接在父组件使用 编辑 删除等可控制显示隐藏

首先，我们需要安装 Vue3 和 TypeScript，可以使用以下命令： ```bash npm install vue@next npm install --save-dev typescript ``` 接下来，我们可以创建一个基本的 Table 组件： ```html <template> <table> <thead> <tr> <th v-for="column in columns" :key="column.key">{{ column.label }}</th> <th v-if="hasActions"></th> </tr> </thead> <tbody> <slot name="row" v-for="item in items" :item="item" :key="item.id"></slot> </tbody> </table> </template> <script lang="ts"> import { defineComponent } from 'vue' import { TableItem } from './types' export default defineComponent({ name: 'Table', props: { columns: { type: Array as () => { key: string, label: string }[], required: true }, items: { type: Array as () => TableItem[], required: true }, hasActions: { type: Boolean, default: false } } }) </script> ``` 在这个组件中，我们定义了三个 props：columns、items 和 hasActions。columns 是一个对象数组，每个对象包含一个 key 和 label，分别表示列的键和标题。items 是一个表示表格数据的数组，每个对象包含一个 id 和其他列数据。hasActions 是一个布尔值，表示是否有操作列。 我们在模板中使用 v-for 指令循环渲染表头和数据行。对于表头，我们循环渲染 columns 数组中的每个对象，使用 key 属性来确保每个表头都有唯一的标识符。如果 hasActions 为 true，则渲染一个空的 th 元素作为操作列。 对于数据行，我们使用插槽来渲染每个表格行。我们将插槽命名为 row，并在 v-for 中使用它，同时将当前行的 item 对象传递给插槽。 现在我们可以在父组件中使用这个基本的 Table 组件，并在插槽中渲染行数据： ```html <template> <Table :columns="columns" :items="items" :hasActions="true"> <template #row="{ item }"> <tr> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td> <slot name="actions" :item="item"></slot> </td> </tr> </template> </Table> </template> <script lang="ts"> import { defineComponent } from 'vue' import { TableItem } from './types' export default defineComponent({ name: 'ExampleComponent', data() { return { columns: [ { key: 'name', label: 'Name' }, { key: 'age', label: 'Age' } ], items: [ { id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 30 } ] } } }) </script> ``` 在这个例子中，我们创建了一个父组件，其中包含一个 Table 组件。我们通过 props 传递 columns、items 和 hasActions 给 Table 组件。然后，我们使用名为 row 的插槽来渲染数据行。我们在这个插槽中创建一个 tr 元素，并使用 item 对象的属性来渲染每个单元格的值。我们还在操作列中使用了一个具名插槽，用于在父组件中渲染操作按钮。 现在我们可以在父组件中使用具名插槽来渲染操作列： ```html <template> <Table :columns="columns" :items="items" :hasActions="true"> <template #row="{ item }"> <tr> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td> <slot name="actions" :item="item"> <button @click="editItem(item)">Edit</button> <button @click="deleteItem(item)">Delete</button> </slot> </td> </tr> </template> </Table> </template> <script lang="ts"> import { defineComponent } from 'vue' import { TableItem } from './types' export default defineComponent({ name: 'ExampleComponent', data() { return { columns: [ { key: 'name', label: 'Name' }, { key: 'age', label: 'Age' } ], items: [ { id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 30 } ] } }, methods: { editItem(item: TableItem) { // TODO: implement editItem method }, deleteItem(item: TableItem) { // TODO: implement deleteItem method } } }) </script> ``` 在这个例子中，我们在具名插槽中渲染了两个按钮，分别用于编辑和删除操作。我们还为这些按钮定义了 click 事件处理程序，以便在父组件中实现相应的行为。 现在，我们已经创建了一个可扩展的移动端 Table 组件，可以使用它来展示和操作表格数据。