记录处理分页表格的方法

项目场景：

项目有很多带分页的表格页面，需要重复请求数据处理分页，这时就需要一个共用的方法统一处理这些重复的代码。

记录一下，方便以后复制。

使用Element。

---

方法：

为什么要区分总条数是否单独获取，公司原因，部分接口总条数无法和数据一起拿回来，需要单独再请求一次。

1.新建一个ts文件保存方法。

import { ref } from 'vue'

import type { Ref } from 'vue'



// 请求api的返回参数类型

interface ResultType<T> {

  state: number,

  data: T,

  msg: string

}



// 传入参数的类型

interface UserTabParams {

  api: (params: any) => Promise<ResultType<any>>,

  paramsValue?: any

  // 总条数是否需要单独获取，传入true表示需要。

  falg?: boolean | undefined

}



export default function useTab ({ api, paramsValue, falg }: UserTabParams) {

  const num = ref(10)

  // 是否加载中

  const isLoading = ref(false)

  // 表格数据

  const tableData: Ref<{}[]> = ref([])

  // 传入的请求api

  // eslint-disable-next-line prefer-const

  let httpRess: (params: any) => Promise<ResultType<any>>

  // 发起请求获取表格数据

  async function getAdminData (api: (params: any) => Promise<ResultType<any>>, paramsValue: any, falg:boolean | undefined) {

    try {

      // 开启加载状态

      isLoading.value = true

      // 请求数据,区分总条数需要单独请求的情况

      // 因为公司接口原因：

        1.请求参数autoCount如果为true，就表示需要总条数，那本次请求就只有总条数返回， 没有数据返回；所以请求数据时autoCount需要为false。

        2.但是又有部分接口的总条数可以和总条数一起返回，所以需要区分当前传入接口API是否需要单独获取总条数。

        3.所以当 falg 传入为false或者没有传入时，表示当前接口不需要单独获取，那么请求参数autoCount为true把总条数和数据一起拿回来；当传入true时，表示总条数需要单独获取，那么第一次请求时autoCount为flase获取数据，然后发起第二次请求获取总条数。

      const adminRes = await api({

        autoCount: falg ? !falg : true,

        page: currentPage.value,

        resultNum: num.value,

        ...paramsValue

      })

      // 获取总条数，falg为true 总条数需要单独请求。

      if (falg) {

        const sizeAllRes = await api({

          autoCount: true,

          ...paramsValue

        })

        if (adminRes.state === 1) {

          // 数据

          tableData.value = adminRes.data.results

          // 总页数

          pageCount.value = adminRes.data.pageCount

          // 总条数

          sizeAll.value = sizeAllRes.data.sizeAll

          // 当前页数

          // currentPage.value = adminRes.data.pageNum

        }

      } else {

        if (adminRes.state === 1) {

          // 数据

          tableData.value = adminRes.data.results

          // 总页数

          pageCount.value = adminRes.data.pageCount

          sizeAll.value = adminRes.data.sizeAll

          // currentPage.value = adminRes.data.pageNum

        }

      }

    } finally {

      // 关闭加载状态

      isLoading.value = false

    }

  }



  // 总条目个数

  const sizeAll = ref(0)

  // 当前分页

  const currentPage = ref(1)

  // 总页数

  const pageCount = ref(100)



  // 修改每页显示条目个数时触发，获取修改的结果

  const handleSizeChange = () => {

    getAdminData(httpRess, paramsValue, falg)

  }



  // 改变当前页数触发/翻页，获取改变后的页数

  const handleCurrentChange = () => {

    console.log(isLoading.value)

    getAdminData(httpRess, paramsValue, falg)

  }



  // 接收用户搜索的关键字

  function dataKeyword (val: any) {

    if (paramsValue) {

      paramsValue = val

      getAdminData(api, paramsValue, falg)

    }

  }

  httpRess = api

  getAdminData(api, paramsValue, falg)

  return {

    handleSizeChange,

    handleCurrentChange,

    tableData,

    isLoading,

    sizeAll,

    currentPage,

    pageCount,

    dataKeyword

  }

}

2.在页面中引入并使用。

引入：import useTab from '@/文件路径'

使用：

const {

  handleSizeChange,

  handleCurrentChange,

  tableData,

  isLoading,

  currentPage,

  dataKeyword,

  // 总条数

  sizeAll

} = useTab({ api: '接口Api', paramsValue: '用户搜索关键字对象', falg: true })