vue3 + ts 开发系统 -- table分页/一些小坑

table组件分页封装

• 希望以表格方式展示列表数据，但数据量较大，应使用分页加载

• Table组件和Pagination组件可以很方便实现这点，因有多组数据需要通过该方式加载，将其封装为TablePagination组件。

• 最初table以插槽形式注入，因为对于不同数据集来说，表格列必然不同，这与数据集，以及页面期望展示的数据相关，所以不采用table放在TablePagination中，props传入属性的形式。

• 后续发现Table数据是以props.data的方式传入，为了方便控制分页，将Table组件写在TablePagination中，table-column则使用slot注入。

• 基础代码如下

  <script setup lang="ts">
  import {
        computed, ref } from "vue-demi";
  
  const props = defineProps<{
       
      data?: Array<any>
  }>()
  
  const current = ref(1