您好,欢迎来到易妖游戏网。
搜索
您的当前位置:首页vue3 + ts 开发系统 -- table分页/一些小坑

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

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- vipyiyao.com 版权所有 湘ICP备2023022495号-8

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务