Admin Pro Table

Appearance

插槽总览 ​

本页汇总 admin-pro-table 中所有常用插槽，包含：

  • ProTable（表格主组件）
  • ProSearchForm（搜索组件）
  • ProForm（独立表单）
  • ProFormPopup（手动弹窗表单 / ProTable 内部弹层）
  • 字段级插槽（FormItem）

1. ProTable 插槽 ​

插槽名说明作用域参数
toolbar工具栏自定义区域-
toolbar-before工具栏左侧（返回按钮后，内置按钮前）-
toolbar-after工具栏右侧（内置按钮后）-
operation-before操作列内置按钮前{ row, tableRef }
operation-after操作列内置按钮后{ row, tableRef }
footer-left分页底栏左侧-
footer-right分页底栏右侧（刷新按钮前）-
[列 slot 名]columns[].slot 对应列内容{ row, tableRef }
search-*搜索区域插槽（透传给 ProSearchForm）见下方「搜索组件插槽」
form-*表单字段相关插槽（field.slot / extra-* / prepend-* / append-* 透传给 ProFormPopup）见下方「表单组件插槽」

ProTable 插槽示例 ​

vue
<pro-table :search-config="searchConfig" :table-config="tableConfig" :form-config="formConfig">
  <template #toolbar-before>
    <el-button>导出</el-button>
  </template>

  <template #status="{ row, tableRef }">
    <el-tag :type="row.status === 1 ? 'success' : 'danger'">
      {{ row.status === 1 ? '启用' : '禁用' }}
    </el-tag>
  </template>

  <template #operation-after="{ row, tableRef }">
    <el-button link size="small" @click="handleView(row)">查看</el-button>
  </template>

  <!-- 搜索插槽（建议 field.slot 直接写 search-custom-name） -->
  <template #search-custom-name="{ formData }">
    <el-input v-model="formData.name" placeholder="自定义搜索输入" />
  </template>

  <!-- 表单容器插槽（注意不是 form-form-header） -->
  <template #form-header>
    <el-alert title="请先确认基础信息" type="warning" :closable="false" />
  </template>
</pro-table>

ProTable 插槽中的 tableRef ​

当使用列插槽、operation-before、operation-after 时，作用域中的 tableRef 与组件 ref 暴露的方法保持一致，可直接在插槽内部控制表格与表单。

常用方法：

方法说明
refresh()刷新列表
reset()重置搜索并刷新列表
getTableData()获取当前表格数据
getSelectedRows()获取当前选中行（多选多条，单选 0/1 条）
openAdd(data?)打开新增弹窗，可传初始回显数据
openEdit(row)打开编辑弹窗并回显数据
openCopy(row)打开复制弹窗
closeForm()关闭当前表单
isFormOpen()返回当前表单是否打开
getFormState()返回当前表单状态 { visible, type, row, params }
getFormRef()获取内部 FormPopup 实例
getFormData()获取当前表单数据
setFormData(data)设置整表表单数据
patchFormData(data)部分更新表单数据
validateForm()触发表单校验
getPagination()获取当前分页信息
getSearchParams()获取当前搜索条件
getDataTableRef()获取内部 DataTable 实例

例如：

vue
<pro-table :table-config="tableConfig" :form-config="formConfig">
  <template #operation-after="{ row, tableRef }">
    <el-button link size="small" @click="tableRef.openEdit(row)">外部编辑</el-button>
    <el-button link size="small" @click="tableRef.openCopy(row)">复制</el-button>
  </template>
</pro-table>

2. 搜索组件插槽（ProSearchForm） ​

插槽名说明作用域参数
[field.slot]字段配置 slot: 'xxx' 时的自定义控件{ modelValue, field, formData }
extra-[key]字段下方扩展内容（字段 extra: 'slot'）{ field, formData, modelValue }
prepend-[key]控件前插槽（字段 prepend: 'slot'）同上
append-[key]控件后插槽（字段 append: 'slot'）同上

搜索组件插槽示例 ​

vue
<ProSearchForm :config="searchConfig" v-model="searchModel">
  <template #custom-name="{ formData }">
    <el-input v-model="formData.name" placeholder="请输入姓名" />
  </template>
  <template #append-amount="{ formData }">
    {{ formData.currency === 'USD' ? '美元' : '人民币' }}
  </template>
</ProSearchForm>
js
const searchConfig = {
  model: { name: '', currency: 'CNY', amount: null },
  fields: [
    { label: '姓名', key: 'name', component: 'input', slot: 'custom-name' },
    { label: '金额', key: 'amount', component: 'input-number', append: 'slot' }
  ]
}

在 ProTable 中使用时，建议 field.slot 直接写成带 search- 前缀的值（如 search-custom-name），并在模板中用同名插槽。

3. 表单组件插槽（ProForm） ​

插槽名说明作用域参数
form-header表单内容区顶部（FormContent 前）{ formRef, handleSubmit, handleReset, formData, loading }
form-footer表单内容区底部（FormContent 后、按钮区前）同上
footer-before按钮区域左侧同上
footer-after按钮区域右侧同上
[field.slot]字段自定义控件{ modelValue, field, formData }
extra-[key]字段下方扩展内容（字段 extra: 'slot'）{ field, formData, modelValue }
prepend-[key]控件前插槽（字段 prepend: 'slot'）同上
append-[key]控件后插槽（字段 append: 'slot'）同上

ProForm 插槽示例 ​

vue
<ProForm :config="formConfig" @submit="handleSubmit">
  <template #form-header>
    <el-alert title="退回后需填写原因" type="warning" :closable="false" />
  </template>

  <template #form-footer="{ formData }">
    <div style="margin-top: 12px; color: #e6a23c;">当前状态：{{ formData.status }}</div>
  </template>

  <template #footer-after="{ handleSubmit }">
    <el-button type="success" @click="handleSubmit">二次确认提交</el-button>
  </template>
</ProForm>

4. 弹窗表单插槽（ProFormPopup） ​

插槽名说明作用域参数
form-header表单内容区顶部（FormContent 前）{ formRef, handleClose, handleSave, handleSubmit, formData, loading }
form-footer表单内容区底部（FormContent 后、按钮区前）同上
footer-before按钮区域左侧同上
footer-after按钮区域右侧同上
[field.slot]字段自定义控件{ modelValue, field, formData }
extra-[key]字段下方扩展内容（字段 extra: 'slot'）{ field, formData, modelValue }
prepend-[key]控件前插槽（字段 prepend: 'slot'）同上
append-[key]控件后插槽（字段 append: 'slot'）同上

ProFormPopup 插槽示例 ​

vue
<ProFormPopup v-model:visible="visible" :config="formConfig" @submit="handleSubmit">
  <template #form-header>
    <el-alert title="该操作将影响审批流" type="error" :closable="false" />
  </template>

  <template #form-footer="{ formData }">
    <div style="padding: 8px 0; color: #909399;">退回原因：{{ formData.rejectReason || '未填写' }}</div>
  </template>
</ProFormPopup>

在 ProTable 中透传使用时：

  • 表单容器插槽直接使用：#form-header、#form-footer、#footer-before、#footer-after
  • 字段相关插槽使用 form- 前缀（因为 FormContent 会自动规范化字段插槽名）：
    • #form-custom-name
    • #form-extra-name
    • #form-prepend-amount
    • #form-append-amount

5. 字段级插槽命名规则 ​

5.1 slot: 'xxx' ​

字段配置：

js
{ label: '姓名', key: 'name', component: 'input', slot: 'custom-name' }

对应插槽：

vue
<template #custom-name="{ modelValue, field, formData }">
  <el-input v-model="formData.name" />
</template>

5.2 extra / prepend / append = 'slot' ​

extra、prepend、append 设为 'slot' 时使用字段级插槽，作用域参数均包含 { field, formData, modelValue }，可以根据当前表单数据动态渲染内容。

在 slot 自定义控件中若需监听其他字段变化（提示、清空、按状态回填等），在字段配置中使用 watchDeps + onWatchDeps，详见 watchDeps 依赖监听。

字段配置：

js
{ key: 'remark', component: 'input', extra: 'slot' }
{ key: 'amount', component: 'input-number', prepend: 'slot', append: 'slot' }

对应插槽：

vue
<template #extra-remark="{ formData }">说明内容：{{ formData.remark }}</template>
<template #prepend-amount="{ formData }">{{ formData.currency === 'USD' ? '$' : '¥' }}</template>
<template #append-amount="{ formData }">{{ formData.currency === 'USD' ? '美元' : '人民币' }}</template>

5.3 prepend / append 函数写法 ​

如果只是根据表单字段显示不同描述，不需要自定义 DOM，可直接使用函数：

js
{
  label: '金额',
  key: 'amount',
  component: 'input-number',
  prepend: (formData, field) => formData.currency === 'USD' ? '$' : '¥',
  append: (formData, field) => formData.currency === 'USD' ? '美元' : '人民币'
}

6. 前缀规则（在 ProTable 内使用） ​

由于 ProTable 同时承载搜索区与表单区，透传插槽时有两类规则：

6.1 搜索插槽 ​

建议在 searchConfig.fields[].slot 中直接写 search-xxx，并在模板里用同名插槽。

js
{ label: '姓名', key: 'name', component: 'input', slot: 'search-custom-name' }
vue
<template #search-custom-name="{ formData }">...</template>

6.2 表单插槽 ​

  • 表单容器插槽（form-header、form-footer、footer-before、footer-after）直接使用原名。
  • 字段相关插槽（field.slot / extra-* / prepend-* / append-*）建议使用 form-xxx，与 FormContent 的规范化逻辑一致。
vue
<template #form-header>...</template>
<template #form-footer="{ formData }">...</template>
<template #footer-before>...</template>

<template #form-custom-name="{ formData }">...</template>
<template #form-extra-remark="{ formData }">...</template>