uniapp中如何实现表格组件

<template><view class="table"><view class="table-header"><!-- 表格的表头 --><text v-for="item in header" :key="item">{{ item }}</text></view><view class="table-body"><!-- 表格的内容 --><view v-for="row in data" :key="row.id" class="table-row"><text v-for="cell in row" :key="cell">{{ cell }}</text></view></view></view></template><script>export default {  props: {    header: { // 表头数据      type: Array,      default: () => []    },    data: { // 表格内容数据      type: Array,      default: () => []    }  },  methods: {    // 表格的点击事件    handleRowClick(row) {      console.log("点击了一行数据:", row);    }  }}</script><style scoped>.table {  width: 100%;  border-collapse: collapse;}.table-header {  background-color: #f2f2f2;  font-weight: bold;  padding: 10px;}.table-row {  border-bottom: 1px solid #ccc;  padding: 10px;}.table-row:last-child {  border-bottom: none;}.table-row:hover {  background-color: #f5f5f5;  cursor: pointer;}</style>

<template><view><table :header="header" :data="data"></table></view></template><script>import Table from '@/components/Table'export default {  components: {    Table  },  data() {    return {      header: ['姓名', '年龄', '性别'],      data: [        { id: 1, name: '张三', age: 20, gender: '男' },        { id: 2, name: '李四', age: 22, gender: '女' },        { id: 3, name: '王五', age: 25, gender: '男' },      ]    }  }}</script>