Vue3+TS的分页封装（加上了搜索、筛选、加载）

<template>
  <div class="paging">
    <!-- 搜索和筛选区域 -->
    <div class="search-filter">
      <el-input v-model="searchQuery" placeholder="请输入搜索内容"></el-input>
      <el-button @click="handleFilterClick">筛选</el-button>
    </div>
    <!-- 分页表格 -->
    <el-table :data="displayData">
      <!-- 表格列定义 -->
    </el-table>
    <!-- 分页加载 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="filteredData.length"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
 
export default defineComponent({
  setup() {
    // 假设dataList是从外部传入的需要分页的数据数组
    const dataList = ref<any[]>([...]);
    const searchQuery = ref('');
    const currentPage = ref(1);
    const pageSize = ref(10);
 
    // 应显示的分页后数据
    const displayData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return filteredData.value.slice(start, end);
    });
 
    // 应用搜索和筛选后的数据
    const filteredData = computed(() => {
      let result = dataList.value;
      // 这里可以加入更复杂的筛选逻辑
      if (searchQuery.value) {
        // 模拟对结果进行搜索筛选
        result = result.filter(item => item.name.includes(searchQuery.value));
      }
      return result;
    });
 
    // 处理分页大小改变
    function handleSizeChange(val: number) {
      pageSize.value = val;
    }
 
    // 处理分页页码改变
    function handleCurrentChange(val: number) {
      currentPage.value = val;
    }
 
    // 处理筛选按钮点击
    function handleFilterClick() {
      // 这里可以加入更复杂的筛选逻辑
    }
 
    return {
      searchQuery,
      currentPage,
      pageSize,
      displayData,
      handleSizeChange,
      handleCurrentChange,
      handleFilterClick,
    };
  }
});
</script>
 
<style scoped>
.paging {
  /* 样式内容 */
}
.search-filter {
  /* 样式内容 */
}
</style>

这个代码实例展示了如何在Vue 3和TypeScript中封装一个带有搜索、筛选、分页加载的组件。它使用了ref来定义响应式数据，computed来计算分页后的数据，以及el-pagination和el-table来展示分页界面。这个例子提供了基本的分页逻辑，并且可以根据具体需求进行扩展和优化。