Admin Pro Table

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

特性

• ProTable：搜索表单 + 表格 + 分页 + 工具栏（添加/删除/返回），内置列表请求、分页、多选与操作列
• 表单弹层：配置化 FormPopup，支持弹窗 / 抽屉 / 整页三种模式，与 ProTable 联动新增/编辑/复制
• 全局配置：表格（tableProps）、表单（formConfig）、搜索（searchFormConfig）、分页（footerConfig）等可在 main.js 统一配置，单表/单表单可覆盖
• Element 全属性：表格通过 tableProps、表单通过 formAttrs 透传，支持 Element Plus Table 与 Form 全部属性

安装

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: { listApi: (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: { requestApi: addApi },
  edit: { requestApi: updateApi }
}
</script>

全局配置

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

app.use(ProTable, {
  defaultPageSize: 20,
  pageKey: 'page',
  pageSizeKey: 'pageSize',
  responseFormat: (res) => ({ list: res?.data?.list ?? [], total: res?.data?.total ?? 0 }),
  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' } },
  searchFormConfig: { labelWidth: '100px', gutter: 20, span: 8 },
  successCode: 1,
  codeKey: 'code',
  messageKey: 'msg'
})

| 配置项 | 说明 | |--------|------| | tableProps | 表格默认属性，支持 Element Table 全部属性，单表 tableConfig.tableProps 覆盖 | | formConfig | 表单默认（labelWidth、labelPosition、formAttrs、span、uploadConfig 等），单表单覆盖 | | searchFormConfig | 搜索表单默认（labelWidth、gutter、span、uploadConfig 等），单表 searchConfig 覆盖 | | footerConfig | 底栏分页（show、showPagination、showRefresh、pageSizes、paginationLayout） | | responseFormat | 列表接口返回格式化 (res) => ({ list, total }) | | successCode / codeKey / messageKey | 表单提交成功后用于解析并提示的字段 |

配置说明

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

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

License

MIT