vue3 +ts 移动端如何封装一个table表格 表头对应列的内容可通过插槽来配置值 有操作列 操作列当中的内容需要通过具名插槽直接在父组件使用 编辑 删除等可控制显示隐藏
时间: 2023-06-25 19:07:01 浏览: 90
vue3+ts 表单和表格配置化组件
您可以封装一个Table组件来实现这个需求。以下是示例代码:
```html
<template>
<div class="table-container">
<div class="table-header">
<div
v-for="(header, index) in headers"
:key="index"
class="table-cell"
>
{{ header }}
</div>
<div class="table-cell">操作</div>
</div>
<div class="table-body">
<div v-for="(item, index) in data" :key="index" class="table-row">
<div
v-for="(header, index) in headers"
:key="index"
class="table-cell"
>
<slot :name="header" :item="item">{{ item[header] }}</slot>
</div>
<div class="table-cell">
<slot name="actions" :item="item"></slot>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
interface TableData {
[key: string]: any;
}
export default defineComponent({
name: "Table",
props: {
headers: {
type: Array,
required: true,
},
data: {
type: Array,
required: true,
},
},
});
</script>
```
在这个组件中,我们定义了一个名为Table的组件,并且它接受两个prop,headers和data。headers是表头数组,data是表格数据数组。
接下来,在组件的模板中,我们使用了两个div,一个用于表头,一个用于表格数据。在表头中,我们使用了一个v-for循环来渲染表头单元格。在表格数据中,我们使用了另一个v-for循环来渲染每一行的单元格。
对于每个单元格,我们使用了一个slot来渲染对应的内容。我们使用了name属性来指定插槽的名称,这个名称就是headers数组中的值。我们还通过:item属性将当前行的数据传递给插槽。
对于操作列,我们使用了一个具名插槽,它的名称是actions。我们同样通过:item属性将当前行的数据传递给插槽。
现在,您可以在父组件中使用这个Table组件,并在其中添加具名插槽来渲染操作列的内容,如下所示:
```html
<template>
<Table :headers="headers" :data="data">
<template #name="name" #item="item">
<div>{{ item[name] }}</div>
</template>
<template #actions="item">
<button @click="editItem(item)">编辑</button>
<button @click="deleteItem(item)">删除</button>
</template>
</Table>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Table from "@/components/Table.vue";
interface TableData {
[key: string]: any;
}
export default defineComponent({
name: "MyTable",
components: {
Table,
},
data() {
return {
headers: ["id", "name", "age"],
data: [
{ id: 1, name: "张三", age: 20 },
{ id: 2, name: "李四", age: 25 },
{ id: 3, name: "王五", age: 30 },
],
};
},
methods: {
editItem(item: TableData) {
// 编辑逻辑
},
deleteItem(item: TableData) {
// 删除逻辑
},
},
});
</script>
```
在这个父组件中,我们使用了MyTable作为组件的名称,并且引入了Table组件。我们在Table组件中添加了两个具名插槽,一个是name插槽用于渲染普通列的内容,另一个是actions插槽用于渲染操作列的内容。
我们还定义了editItem和deleteItem方法来处理编辑和删除操作。在具名插槽中,我们通过调用这些方法来控制操作列的显示和隐藏。
现在,您就可以使用这个Table组件来封装移动端的表格了。
阅读全文