Admin Pro Table

Appearance

API：插槽与使用规则 ​

插槽与跳转说明 ​

ProTable 的 Ref 方法、事件说明已拆分到 实例方法与事件。

插槽完整清单统一维护在 插槽总览。

快速规则 ​

  • 列插槽：columns[].slot 对应 <template #xxx>
  • 搜索插槽：建议在 searchConfig.fields[].slot 直接写 search-xxx，模板中同名使用
  • 表单容器插槽：#form-header、#form-footer、#footer-before、#footer-after
  • 表单字段插槽：使用 form- 前缀（如 #form-custom-name、#form-extra-name）

常见示例 ​

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

    <template #statusSlot="{ row, tableRef }">
      <el-tag :type="row.status === 1 ? 'success' : 'danger'">
        {{ row.status === 1 ? '启用' : '禁用' }}
      </el-tag>
      <el-button link size="small" @click="tableRef.openEdit(row)">编辑</el-button>
    </template>

    <template #search-custom-name="{ formData }">
      <el-input v-model="formData.name" placeholder="自定义搜索输入" />
    </template>

    <template #form-header>
      <el-alert title="请先确认基础信息" type="warning" :closable="false" />
    </template>
  </pro-table>
</template>

插槽清单 ​

详见 插槽总览。

  • ProTable 插槽
  • 搜索组件插槽
  • ProForm / ProFormPopup 插槽
  • 字段级插槽命名规则

相关页面 ​