elementui 分页组件-“前端”在Vue3中更快更高效地写页面

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

前言

在开发和管理后台的过程中，肯定会遇到很多增删改查的页面，而那些页面的逻辑大多是相同的，比如获取列表数据、分页等基本功能，和过滤功能。 区别在于所呈现的数据项。 还有一些操作按钮。

当一开始只有1、2个页面时，大多数开发者可能会直接复制上一个页面的代码，而随着项目的进展，类似页面的数量可能会增加，这直接导致项目代码耦合度越来越高。

这也是项目中应该抽取一些可复用的功能或者组件的主要原因之一

下面，我们封装了一个通用的useList，适配大部分列表页面的增删改查，让你更快更高效的完成任务，准时上班~

后知识封装

我们需要提取一些通用的参数和函数，并将它们封装到一个通用的钩子中。 以后在其他页面复用相同的功能会更简单、更方便。

定义列表页面的基本分页数据

export default function useList() {
  // 加载态
  const loading = ref(false);
  // 当前页
  const curPage = ref(1);
  // 总数量
  const total = ref(0);
  // 分页大小
  const pageSize = ref(10);
}

如何获取列表数据

想了想，让useList函数接收一个listRequestFn参数来请求列表中的数据。

定义一个列表变量来存储网络请求的数据内容，因为内部很难直接确定列表数据类型，而让外部以形参的形式提供列表数据类型。

export default function useList(
  listRequestFn: Function
) {
  // 忽略其他代码
  const list = ref([]);
}

在useList中创建loadData函数来调用数据获取函数。 该函数接收一个参数，获取指定页码的数据（可选，默认为curPage的值）。

设置加载状态调用外部传入的函数，将获取到的数据参数放入list和total中即可关闭加载状态

这里使用的是async/await句型。 如果请求或者解构出现错误，就会使用catch代码块，然后关闭加载状态。

这里需要注意的是传入listRequestFn函数接收的参数个数和类型对应正常，请根据实际情况调整

export default function useList(
  listRequestFn: Function
) {
  // 忽略其他代码
  // 数据
  const list = ref([]);
  // 过滤数据
  // 获取列表数据
  const loadData = async (page = curPage.value) => {
    // 设置加载中
    loading.value = true;
    try {
      const {
        data,
        meta: { total: count },
      } = await listRequestFn(pageSize.value, page);
      list.value = data;
      total.value = count;
    } catch (error) {
      console.log("请求出错了", "error");
    } finally {
      // 关闭加载中
      loading.value = false;
    }
  };
}

别忘了，还有切换分页来处理

使用watch函数窃听数据，当curPage和pageSize的值发生变化时，调用loadData函数获取新数据。

export default function useList(
  listRequestFn: Function
) {
  // 忽略其他代码
  // 监听分页数据改变
  watch([curPage, pageSize], () => {
    loadData(curPage.value);
  });
}

现已实现基本列表数据获取

实施数据过滤器

在庞大的数据列表中，数据过滤是必不可少的功能

一般我会在一个ref中定义过滤条件数组，请求的时候直接把ref扔到request函数中即可。

useList函数中，第二个参数接收一个filterOption对象，对应列表中的过滤条件数组。

调整loadData函数，在request函数中传入filterOption对象

注意传入listRequestFn函数接收的参数个数和类型对应正常，请根据实际情况调整

export default function useList(listRequestFn: Function, filterOption: Ref