实例方法与事件

暴露方法（Ref）

通过 ref 获取组件实例后可调用：

方法	说明
refresh()	刷新列表（重新请求 api）
reset()	重置搜索条件并刷新列表
getTableData()	返回当前表格数据数组
getSelectedRows()	返回当前选中的行数组（多选为多条，单选为 0/1 条）
getPagination()	返回当前分页 { page, size, total }
getSearchParams()	返回当前搜索表单值
openAdd(data?)	打开新增弹窗（需配置 formConfig），可传初始回显数据
openEdit(row)	打开编辑弹窗（需配置 formConfig），传入当前行数据用于回显
openCopy(row)	打开复制弹窗（需配置 formConfig），传入当前行数据并去除主键用于回显；表单 type 为 copy
closeForm()	关闭当前表单弹窗/整页表单
isFormOpen()	返回当前表单是否处于打开状态
getFormState()	返回当前表单状态 { visible, type, row, params }
getFormRef()	返回内部 FormPopup 组件实例
getFormData()	返回当前表单数据（需已打开表单）
setFormData(data)	设置整表表单数据（需已打开表单）
patchFormData(data)	部分更新表单数据（需已打开表单）
validateForm()	触发表单校验，返回 Promise（需已打开表单）
getDataTableRef()	返回内部 DataTable 组件实例

<template>
  <pro-table ref="tableRef" :table-config="tableConfig" :search-config="searchConfig" :form-config="formConfig" />
</template>
<script setup>
import { ref } from 'vue'
const tableRef = ref(null)
// 刷新列表
tableRef.value?.refresh()
// 重置并刷新
tableRef.value?.reset()
// 获取选中行
const rows = tableRef.value?.getSelectedRows()
// 外部打开新增弹窗，并回显初始数据
tableRef.value?.openAdd({ type: 'admin', status: 1 })
// 外部打开编辑弹窗，并传入当前行数据
tableRef.value?.openEdit({ id: 1, name: 'Tom', status: 1 })
// 外部打开复制弹窗
tableRef.value?.openCopy({ id: 1, name: 'Tom', status: 1 })
// 当前表单是否打开
const opened = tableRef.value?.isFormOpen()
// 获取当前表单状态
const formState = tableRef.value?.getFormState()
// 获取当前表单数据（需先打开表单）
const formData = tableRef.value?.getFormData()
// 获取内部表单实例
const formRef = tableRef.value?.getFormRef()
// 设置整表数据
tableRef.value?.setFormData({ name: 'Jerry', status: 0 })
// 部分更新表单数据
tableRef.value?.patchFormData({ status: 1 })
// 主动触发表单校验
tableRef.value?.validateForm()
// 主动关闭表单
tableRef.value?.closeForm()
</script>

表单相关控制

const tableRef = ref(null)

// 打开新增，并传入初始数据
tableRef.value?.openAdd({ type: 'admin', status: 1 })

// 打开编辑/复制
tableRef.value?.openEdit(row)
tableRef.value?.openCopy(row)

// 关闭表单
tableRef.value?.closeForm()

// 判断当前表单状态
const opened = tableRef.value?.isFormOpen()
const state = tableRef.value?.getFormState()

// 读取 / 操作表单数据（需已打开表单）
const data = tableRef.value?.getFormData()
tableRef.value?.setFormData({ name: 'Jerry' })
tableRef.value?.patchFormData({ status: 1 })
await tableRef.value?.validateForm()

autoFetch: false 场景

需要先请求外部接口拿到参数再加载表格时，将 requestConfig.autoFetch 设为 false，在外部数据就绪后手动调用 refresh()：

<template>
  <pro-table ref="tableRef" :table-config="tableConfig" />
</template>

<script setup>
import { ref, onMounted } from 'vue'

const tableRef = ref(null)
const orgId = ref(null)

const tableConfig = {
  requestConfig: {
    autoFetch: false,
    api: getList,
    params: () => ({ orgId: orgId.value })
  }
}

onMounted(async () => {
  // 先拿到依赖数据
  const res = await getOrgInfo()
  orgId.value = res.id
  // 再触发表格加载
  tableRef.value?.refresh()
})
</script>

事件

事件名	说明
back	点击工具栏「返回」按钮时触发（需配置 toolbarConfig.showBack: true），可在回调中执行 router.back() 或切换列表视图