用vue3写一个表格
时间: 2023-07-01 15:12:34 浏览: 50
好的,下面是一个简单的 Vue3 表格组件示例:
```vue
<template>
<table>
<thead>
<tr>
<th v-for="(column, index) in columns" :key="index">{{ column }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
<td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
</tr>
</tbody>
</table>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
props: {
columns: {
type: Array,
required: true,
},
rows: {
type: Array,
required: true,
},
},
});
</script>
```
在这个组件中,我们定义了两个 props,`columns` 和 `rows`,分别表示表格的列和行。在模板中,我们使用了`v-for`指令来遍历列和行,并将它们渲染为表格的头部和主体。
这只是一个简单的示例,你可以根据你的需求对它进行扩展和修改。