vue.js table组件

<template>
  <div>
    <table-component :data="tableData" @sort-change="handleSortChange">
      <template v-slot:header>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Address</th>
        </tr>
      </template>
      <template v-slot:default="{ row }">
        <tr>
          <td>{{ row.name }}</td>
          <td>{{ row.age }}</td>
          <td>{{ row.address }}</td>
        </tr>
      </template>
    </table-component>
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue';

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 24, address: 'New York' },
        { name: 'Bob', age: 30, address: 'Los Angeles' },
        // 更多数据...
      ]
    };
  },
  methods: {
    handleSortChange(sort) {
      // 处理排序逻辑
    }
  }
};
</script>