配置总览

项目级默认值可在安装组件时通过 app.use(AdminProTable, options) 配置，例如 列表请求全局默认（requestConfig）、接口响应格式、是否默认携带分页参数、分页字段、表格默认样式、搜索表单默认布局、表单弹层默认布局、上传配置、权限函数、尺寸等。完整说明与示例见 全局配置；requestConfig 详见 全局 requestConfig；尺寸详见 尺寸。主题色请在业务项目中通过 Element Plus 统一配置。

表格组件通过三个 prop 传入配置：

Prop	说明	文档
search-config	搜索区域配置	搜索组件
table-config	表格、列表请求、操作等配置	请求与行为配置
form-config	新增/编辑表单弹层配置	表单组件

---

searchConfig

搜索区域配置，完整配置见 搜索组件。

属性	说明	类型	默认值
model	搜索条件初始值（进入页面回显；重置会清空，见 搜索组件）	Object	-
fields	搜索项配置数组，结构与表单 fields 一致，见 字段配置	Array	[]
span	每项栅格占位，默认一行三个（8）；adaptive 开启后无效	Number	8
adaptive	宽度自适应（不走 span，按内容横向排列）	Boolean	false
bordered	是否显示搜索区域外边框	Boolean	false
itemWidth	adaptive 下控件默认宽度	String	'180px'
collapse	是否启用折叠展开	Boolean	false
collapsedRows	折叠时显示的行数	Number	1
defaultCollapsed	默认是否收起	Boolean	false
enterSearch	是否支持回车触发搜索	Boolean	true

const searchConfig = reactive({
  model: { name: '', status: '', dateRange: [] },
  span: 8,
  collapse: true,
  collapsedRows: 1,
  fields: [
    { label: '姓名', key: 'name', component: 'input', placeholder: '请输入姓名' },
    {
      label: '状态', key: 'status', component: 'select',
      options: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }]
    },
    { label: '创建日期', key: 'dateRange', component: 'date-range',
      startKey: 'startTime', endKey: 'endTime' }
  ]
})

---

tableConfig

表格主配置。

属性	说明	类型	默认值
requestConfig	列表请求配置，见 请求与行为配置；可在 app.use 中配置全局 requestConfig，单表优先覆盖	Object	-
columns	列配置数组，见 列配置	Array	[]
bordered	是否显示表格区域（工具栏 + 表格 + 分页）外边框，与搜索区 searchConfig.bordered 同款样式	Boolean	false
emptyText	表格无数据时的提示文案	String	'暂无数据，请稍后重试～'
tableProps	透传给 el-table 的属性，见 tableProps	Object	-
rowKey	行主键字段名或 (row) => key，选择列跨页保留选中时必填	String | Function	-
selection	选择列配置（多选 / 单选），见 selection	Object	-
indexColumn	序号列配置，见 indexColumn	Object	-
deleteConfig	删除配置，见 deleteConfig	Object	-
footerConfig	底部分页区配置，见 footerConfig	Object	-
toolbarConfig	工具栏配置，见 toolbarConfig	Object	-
operationConfig	操作列配置，见 operationConfig	Object	-
size	当前表格区域组件尺寸覆盖（可选）	String	继承全局
buttonSize	当前表格内置按钮尺寸覆盖（可选）	String	继承全局

const tableConfig = reactive({
  bordered: true,                 // 表格区域外边框（同 searchConfig.bordered）
  requestConfig: {
    api: getUserList,
    params: { type: 1 },          // 额外固定参数
    defaultPageSize: 20
  },
  columns: [
    { label: '姓名', key: 'name', minWidth: 120 },
    {
      label: '状态', key: 'status', width: 100,
      tag: { map: { 1: '启用', 0: '禁用' }, type: { 1: 'success', 0: 'danger' } }
    },
    { label: '创建时间', key: 'createTime', width: 160 }
  ],
  tableProps: { border: true, stripe: true },
  rowKey: 'id',
  selection: { show: true, type: 'multiple', selectable: (row) => row.status === 1 },
  // 单选：selection: { show: true, type: 'single' },
  indexColumn: { show: true },
  deleteConfig: { api: deleteUser, idField: 'id' },
  toolbarConfig: { showAdd: true, showDelete: true },
  operationConfig: { showEdit: true, showDelete: true, showCopy: false, width: 140 }
})

---

formConfig

新增 / 编辑 / 保存表单弹层配置，完整配置见 表单弹层配置。

属性	说明	类型	默认值
mode	弹层模式：dialog（弹窗）/ drawer（抽屉）/ page（整页）	String	'dialog'
model	表单初始数据，key 与 fields 的 key 对应	Object	-
fields	表单项配置数组，见 字段配置	Array	[]
rules	表单通用校验规则	Object	-
formAttrs	透传给 el-form 的属性（labelWidth、labelPosition 等）	Object	-
add	新增配置：{ title, api, rules, paramsFormat }，见 add 配置	Object	-
edit	编辑配置：{ title, api, rules, fetchInitialData, idKey }，见 edit 配置	Object	-
save	保存草稿配置：{ api, rules, paramsFormat }，见 save 配置	Object	-
footer	底部按钮区配置，见 footer 配置	Object	-

const formConfig = reactive({
  mode: 'dialog',
  model: { name: '', status: 1, remark: '' },
  fields: [
    { label: '姓名', key: 'name', component: 'input' },
    { label: '状态', key: 'status', component: 'select',
      options: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }] },
    { label: '备注', key: 'remark', component: 'textarea', rows: 3, span: 24 }
  ],
  rules: {
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
  },
  add: {
    title: '新增用户',
    api: createUser
  },
  edit: {
    title: '编辑用户',
    api: updateUser,
    fetchInitialData: async (row) => {
      const res = await getUserDetail(row.id)
      return res.data
    }
  },
  save: {
    api: saveDraft
  },
  footer: {
    showSave: true,
    saveBtnTitle: '保存草稿'
  }
})

---

与表单配合

传入 form-config 后，表格自动内置表单弹层：

• 点击工具栏「添加」→ 以 add 配置打开新增表单
• 点击操作列「编辑」→ 以 edit 配置打开编辑表单，自动传入当前行数据
• 点击操作列「复制」→ 以 copy 方式打开，预填当前行数据（去主键），提交走 add.api
• 配置了 save.api 且 footer.showSave: true → 底部显示保存按钮，走 save 配置提交
• 配置了 formConfig.fetchInitialData 时，打开编辑 / 复制弹层会自动请求详情接口并回填（新增不会调用）
• 提交成功后自动刷新列表

完整说明见 表单弹层配置。

表单相关插槽需加 form- 前缀：

<pro-table :table-config="tableConfig" :form-config="formConfig">
  <!-- 自定义表单字段插槽 -->
  <template #form-custom-avatar="{ modelValue, formData }">
    <el-upload v-model="formData.avatar" />
  </template>
</pro-table>

更多表单字段能力见 字段配置，搜索字段能力见 搜索组件。