⚗️ useList

useList hook主要为列表页面提供：API请求、参数绑定、重置、查询及数据处理能力，兼容分页及非分页两种通用后台数据返回形式。

使用方式

🔊🔊🔊说明

以下代码示例为基础参考示例，各项目组成员请依照个人风格自行组织template代码内容。

1.分页模式(常用模式)

// @/api/demo.js
import request from "@/service/index.js"

export function getDemoList(params = {}) {
  return request({
    url: "demo/list",
    method: "post",
    params
  })
}

<template>
  <div class="demo-list" v-loading="loading">
    <!--查询表单-->
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="queryForm.searchText" placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button @click="searchList">查询</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <vxe-table :data="tableData">
      <vxe-column type="seq" title="序号" />
      <vxe-column field="a" title="字段a" />
      <vxe-column field="b" title="字段b" />
    </vxe-table>
    <!--分页-->
    <el-pagination
      v-model:current-page="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum"
      @size-change="getList"
      @current-change="getList"
    />
  </div>
</template>

<script setup>
import { useList } from "@hooks/useList.js"
import { getDemoList } from "@/api/demo.js"

const { tableData, totalNum, queryForm, loading, resetSearch, searchList, getList } = useList(
  getDemoList,
  {
    searchText: undefined
    pageNum: 1,
    pageSize: 10
  }
)
</script>

2.非分页模式

非分页模式下仅需要传递pagination: false即可

<template>...</template>

<script setup>
import { useList } from "@hooks/useList.js"
import { getDemoList } from "@/api/demo.js"

const { tableData, queryForm } = useList(
  getDemoList,
  { searchText: undefined },
  { pagination: false } //[!code highlight]
)
</script>

3.参数过滤

在一些特殊场景下需要保证重置操作时某参数固定不变，此时添加过滤项则是非常有效的手段。使用也非常简单，只需添加exclude配置即可。

<template>...</template>

<script setup>
import { useList } from "@hooks/useList.js"
import { getDemoList } from "@/api/demo.js"

const { tableData, queryForm } = useList(
  getDemoList,
  { queryType: 1 }, //[!code highlight]
  { exclude: ["queryType"] } //[!code highlight]
)
</script>

4.数据处理

有些场景需要对请求数据做一些处理，例如整合、过滤等，此时可以选择传入回调函数来达成这一目的。该函数接受一个list集合作为参数，不会对其他功能产生破坏性影响。

<template>...</template>

<script setup>
import { useList } from "@hooks/useList.js"
import { getDemoList } from "@/api/demo.js"

const { tableData, queryForm } = useList(
  getDemoList,
  { pageNum: 1, pageSize: 12 },
  {
    listHandler: records => {
      return records.map(item => {
        return {
          id: item.id,
          name: item.name
        }
      })
    }
  }
)
</script>

5.请求回调

为支持列表请求后续事件处理，提供onSuccess、onError两个回调函数以供使用。

<template>...</template>

<script setup>
import { useList } from "@hooks/useList.js"
import { getDemoList } from "@/api/demo.js"

const { tableData, queryForm } = useList(
  getDemoList,
  { pageNum: 1, pageSize: 12 },
  {
    onSuccess: () => {
      //请求成功的后续逻辑
    },
    onError: () => {
      //请求失败的后续逻辑
    }
  }
)
</script>

参数说明

options参数详情

Expose变量说明

🔊🔊🔊以下变量或方法均可按需解构