帮我用vue写一个table组件
时间: 2023-05-25 22:04:02 浏览: 84
以下是一个简单的 Vue Table 组件代码示例:
```
<template>
<div>
<table>
<thead>
<tr>
<th v-for="(col, i) in columns" :key="i">{{ col }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in data" :key="i">
<td v-for="(col, j) in columns" :key="j">{{ row[col] }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'VueTable',
props: {
columns: {
type: Array,
required: true
},
data: {
type: Array,
required: true
}
}
}
</script>
<style scoped>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid black;
padding: 8px;
}
th {
text-align: left;
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
```
这个 Table 组件包含两个 props:columns 和 data,分别传入列名和数据行。Table 会遍历这两个 props 并渲染成表格的形式。另外,也可以根据需要在父组件中调整样式等。