-
希望以表格方式展示列表数据,但数据量较大,应使用分页加载
-
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