使用vue3写一个表格传参示例,表格名也需要传参
时间: 2024-03-09 13:44:10 浏览: 21
好的,下面是一个使用 Vue 3 写的表格组件示例,可以传递表格名和表格数据作为 props:
```vue
<template>
<div>
<h2>{{ tableName }}</h2>
<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="column in columns" :key="column">{{ row[column] }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props: {
tableName: {
type: String,
required: true
},
headers: {
type: Array,
required: true
},
rows: {
type: Array,
required: true
}
},
computed: {
columns() {
// 获取所有列名
return Object.keys(this.rows[0]);
}
}
};
</script>
```
在父组件中,可以这样使用这个表格组件:
```vue
<template>
<div>
<my-table
:table-name="'用户列表'"
:headers="['ID', '姓名', '年龄']"
:rows="users"
/>
</div>
</template>
<script>
import MyTable from "@/components/MyTable.vue";
export default {
components: {
MyTable
},
data() {
return {
users: [
{ id: 1, name: "张三", age: 18 },
{ id: 2, name: "李四", age: 20 },
{ id: 3, name: "王五", age: 22 }
]
};
}
};
</script>
```
这样就可以在页面中显示一个名为“用户列表”的表格,表格的表头为“ID”、“姓名”、“年龄”,表格的数据来自父组件的“users”数组。