vue3 编程中如何实现 table 分页组件

在Vue3编程中实现Table分页组件主要涉及到几个关键步骤：利用Vue3的组合式API创建分页逻辑、构建Table组件、集成分页组件至Table中、以及响应式更新Table数据。其中，利用Vue3的组合式API创建分页逻辑是基础也是核心，因为它不仅仅涉及到数据的管理，还包括了如何将这些数据合理地展示给用户。

一、利用Vue3的组合式API创建分页逻辑

Vue 3引入了组合式API，为开发者提供了一种更灵活的方式来组织组件的逻辑。在实现分页功能时，可以通过组合式API来更好地管理和重用代码。

初始化状态

首先，需要定义分页所需的状态，包括当前页码、每页显示的数据量、数据总量等。

import { ref } from 'vue';
export default {
  setup() {
    const currentPage = ref(1);
    const pageSize = ref(10);
    const totalItems = ref(0);
    const items = ref([]);
    return {
      currentPage,
      pageSize,
      totalItems,
      items,
    };
  },
}

分页逻辑

接着，实现分页的逻辑。这通常涉及到监听页码的变化，根据当前页码和每页显示的数据量来计算需要展示的数据。

import { watch, computed } from 'vue';
export default {
  setup(props, { emit }) {
    // ...省略之前的状态初始化代码
    const displayedItems = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return items.value.slice(start, end);
    });
    watch([currentPage, pageSize], () => {
      // 这里可以调用API获取数据或者根据items计算分页数据
      // 更新totalItems等状态
    });
    return {
      displayedItems,
      // 其他返回的状态
    };
  },
}

二、构建Table组件

接下来，基于Vue 3，构建一个Table组件，该组件接收分页后的数据并展示。

Table组件模板

定义Table组件的HTML结构，确保它可以接收并正确显示数据。

<template>
  <table>
    <thead>
      <tr>
        <th>标题</th>
        <!-- 其他表头 -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in displayedItems" :key="item.id">
        <td>{{ item.title }}</td>
        <!-- 其他数据单元格 -->
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  props: ['displayedItems'],
}
</script>

响应式布局

利用CSS提供的表格样式，确保Table组件的布局适应各种屏幕尺寸。这是提升用户体验的关键一步。

三、集成分页组件至Table中

当Table组件和分页逻辑准备就绪后，接下来需要把它们整合起来，形成一个完整的分页Table。

分页组件

可以使用Vue 3的插槽或者是插件市场上现有的分页组件，根据项目需求选择合适的集成方式。

<Pagination :total-items="totalItems" :page-size="pageSize" @page-changed="onPageChange" />

集成分页逻辑

确保分页组件能够接收到分页状态，并在用户交互时更新这些状态。

export default {
  setup() {
    // ...省略之前的状态和逻辑代码
    function onPageChange(newPage) {
      currentPage.value = newPage;
    }
    return {
      onPageChange,
      // 其他返回的状态
    };
  },
}