pro-el-components

Appearance

Composables 组合函数 ​

Vue 3 的组合式 API 为我们提供了强大的逻辑复用能力。Pro El Components 内置了一系列实用的 Composables，帮助您快速处理常见的业务逻辑。

数据管理 ​

处理各种数据获取、缓存和状态管理需求。

Composable描述核心功能
useTableList表格列表管理分页查询、搜索、加载状态
useRequest请求管理防抖、错误处理、重试机制
useSelection选择状态管理多选、全选、反选逻辑
usePageStorage页面缓存表单数据、滚动位置缓存
useUrlDataURL 状态同步查询参数、路由状态管理

UI 交互 ​

提升用户界面交互体验的实用工具。

Composable描述核心功能
useDarkMode暗黑模式主题切换、系统偏好检测
useStreamData流式数据SSE 连接、实时数据更新

快速开始 ​

基本使用 ​

vue
<script setup>
import { useTableList } from 'pro-el-components'

// 定义数据获取函数
async function fetchData(params) {
  const response = await api.getUserList(params)
  return {
    data: response.data.list,
    total: response.data.total
  }
}

// 使用 useTableList 管理表格状态
const {
  data,
  loading,
  pagination,
  searchData,
  search: { submit, reset }
} = useTableList(fetchData)
</script>

<template>
  <div>
    <!-- 搜索表单 -->
    <ProSearchForm
      :fields="searchFields"
      :search="{ submit, reset }"
      :default-value="searchData"
    />

    <!-- 数据表格 -->
    <ProTable
      :columns="columns"
      :data="data"
      :loading="loading"
      :pagination="pagination"
    />
  </div>
</template>

💡 最佳实践 ​

1. 合理组合使用 ​

vue
<script setup>
// ✅ 推荐：将相关的 composables 组合使用
const tableState = useTableList(fetchData)
const selectionState = useSelection()
const urlState = useUrlData(['keyword', 'status'])

// 组合成业务逻辑
function handleSearch(params) {
  urlState.updateParams(params)
  tableState.search.submit(params)
}
</script>

2. 类型定义 ​

typescript
// ✅ 推荐：明确定义类型
interface UserItem {
  id: number
  name: string
  email: string
}

const {
  data,
  loading
} = useTableList<UserItem>(fetchUserList)

// data 的类型自动推导为 UserItem[]