Admin Pro Table

Appearance

表格组件 ​

集成搜索、表格、分页与增删改的列表页组件。安装与使用见 介绍与安装。

文档结构 ​

页面说明
配置总览searchConfig、tableConfig、formConfig 三大配置概览
请求与行为配置requestConfig（含全局配置）、deleteConfig、footerConfig、toolbarConfig、tableProps
列配置columns 属性、formatter、slot、tag、tip、emptyText
附加列配置indexColumn 序号列、selection 选择列（多选 / 单选）、operationConfig 操作列
表单弹层配置formConfig 完整说明：add / edit / save / copy、标题优先级、校验优先级、footer 按钮区
按钮权限与后台权限对接：hasPermission 注入、工具栏与操作列权限码、按行权限
尺寸全局组件尺寸与按钮尺寸配置
实例方法与事件ProTable 的 Ref 方法、表单控制、事件说明
插槽与使用规则插槽使用规则与跳转说明；完整插槽清单见 插槽总览

快速开始 ​

带搜索筛选、分页、序号列、tag 状态列的基础表格，数据为 mock。
vue
<template>
  <pro-table :search-config="searchConfig" :table-config="tableConfig" />
</template>

<script setup>
import { reactive } from 'vue'
import { getUserList } from '@/api/user'

const searchConfig = reactive({
  model: { name: '', status: '' },
  fields: [
    { label: '姓名', key: 'name', component: 'input' },
    { label: '状态', key: 'status', component: 'select',
      options: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }] }
  ]
})

const tableConfig = reactive({
  requestConfig: { api: getUserList },
  columns: [
    { label: '姓名', key: 'name', minWidth: 100 },
    { label: '状态', key: 'status', width: 100,
      tag: { map: { 1: '启用', 0: '禁用' }, type: { 1: 'success', 0: 'danger' } } },
    { label: '创建时间', key: 'createTime', width: 160 }
  ],
  tableProps: { border: true, stripe: true },
  indexColumn: { show: true }
})
</script>