admin-pro-table

Admin Pro Table

Vue 3 + Element Plus 管理后台表格与表单组件库。集成搜索、表格、分页与增删改，通过配置即可完成常见 CRUD 列表页；表格与表单均支持 Element Plus 全部属性，并支持全局配置。

文档： https://smilezhoukang.github.io/admin-pro-table/

特性

• ProTable：搜索表单 + 表格 + 分页 + 工具栏（添加/删除/返回），内置列表请求、分页、多选与操作列
• 表单弹层：配置化 FormPopup，支持弹窗 / 抽屉 / 整页三种模式，与 ProTable 联动新增/编辑/复制
• 全局配置：表格（tableProps）、表单（formConfig）、搜索（searchConfig）、分页（footerConfig）等可在 main.js 统一配置，单表/单表单可覆盖
• Element 全属性：表格通过 tableProps、表单通过 formAttrs 透传，支持 Element Plus Table 与 Form 全部属性
• 上传组件：uploadConfig 支持 successCode / codeKey / messageKey 判断上传响应是否成功，也支持 responsePath 提取文件地址；上传成功后会优先取配置路径中的地址，失败只会进入失败回调，不会走 responseFormat

安装

pnpm add admin-pro-table
# npm install admin-pro-table
# yarn add admin-pro-table

依赖：需已安装 Vue 3、Element Plus、@element-plus/icons-vue（版本见 peerDependencies）。

快速开始

入口文件注册并引入样式：

import { createApp } from 'vue'
import ProTable from 'admin-pro-table'
import 'admin-pro-table/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(ProTable)

页面中使用，通过 search-config、table-config、form-config 传入配置：

<template>
  <pro-table
    :search-config="searchConfig"
    :table-config="tableConfig"
    :form-config="formConfig"
  />
</template>

<script setup>
const searchConfig = {
  model: { name: '', status: '' },
  fields: [
    { label: '姓名', key: 'name', component: 'input', placeholder: '请输入' },
    { label: '状态', key: 'status', component: 'select', options: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }] }
  ]
}

const tableConfig = {
  requestConfig: { api: (params) => fetchList(params) },
  columns: [
    { label: '姓名', key: 'name' },
    { label: '状态', key: 'status' }
  ]
}

const formConfig = {
  fields: [
    { label: '姓名', key: 'name', component: 'input', placeholder: '请输入' },
    { label: '状态', key: 'status', component: 'select', options: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }] }
  ],
  add: { api: addApi },
  edit: { api: updateApi }
}
</script>

全局配置

安装时传入第二参数，可统一表格样式、表单默认、分页与接口约定等：

app.use(ProTable, {
  requestConfig: {
    responseFormat: (res) => ({ list: res?.data?.list ?? [], total: res?.data?.total ?? 0 }),
    paramsFormat: (params) => ({ ...params, source: 'admin' }),
    pageKey: 'page',
    pageSizeKey: 'pageSize',
    defaultPageSize: 20,
    pageParams: true,
    filterEmptyParams: true
  },
  size: 'default',
  buttonSize: 'default',
  footerConfig: { showPagination: true, showRefresh: true, pageSizes: [10, 20, 50, 100] },
  tableProps: { border: true, stripe: true, size: 'default' },
  formConfig: { labelWidth: '100px', labelPosition: 'right', formAttrs: { size: 'default' } },
  searchConfig: { labelWidth: '100px', gutter: 20, span: 8, actionsConfig: { showSearch: true, showReset: true, searchText: '搜索', resetText: '重置' } },
  successCode: 1,
  codeKey: 'code',
  messageKey: 'msg'
})

配置说明

• searchConfig：搜索区域（model、fields、span、collapse、defaultCollapsed、actionsConfig 等），fields 与表单字段结构一致
• tableConfig：requestConfig（api、params、paramsFormat、pageKey、responseFormat 等，支持全局 requestConfig 继承）、columns、tableProps、rowKey、selection、deleteConfig、footerConfig、toolbarConfig、operationColumn 等
• formConfig：mode（dialog/drawer/page）、fields、formAttrs、add/edit/save（api、rules、paramsFormat）、uploadConfig 等

uploadConfig 说明

uploadConfig 可配置在全局 formConfig / searchConfig 中，也可在单个字段上覆盖。常用配置如下：

通过 ref 可调用：refresh()、reset()、getTableData()、getSelectedRows()、getPagination()、getSearchParams()、openAdd()。事件：@back（工具栏返回按钮）。

给 AI / Cursor 用（写 CRUD 不翻源码）

• 在线文档：https://smilezhoukang.github.io/admin-pro-table/
• 包内 AI 指南：CLAUDE.md

业务项目里 Cursor 不会自动读 node_modules，需要任选一种方式挂上：

# 1）推荐：复制 Cursor Rule（安装包后）
mkdir -p .cursor/rules
cp node_modules/admin-pro-table/ai/cursor-rule.mdc .cursor/rules/admin-pro-table.mdc

# 2）或把指南链到项目根，方便 Agent 发现
ln -sf node_modules/admin-pro-table/CLAUDE.md ./CLAUDE.md

之后让 AI「写用户列表 CRUD」时，它应只按 CLAUDE.md / 在线文档写配置，而不是去读组件源码。

License

MIT