PcTable 通用表格组件文档

PcTable 是一个基于 Element Plus 二次封装的业务表格组件。它集成了 自动/手动请求模式、响应式分页、自定义插槽渲染 以及 Render 函数支持，旨在减少重复的表格样板代码。

1. 核心特性

• 🚀 双模式支持：支持配置 requestApi 自动请求并处理分页，也支持 tableList 外部传参模式。
• ⚡ Vue 3.5+ 优化：使用 defineModel 同步分页状态，支持原生泛型 generic 约束。
• 🎨 灵活渲染：支持 slot 具名插槽渲染和 render 函数（h 函数）渲染。
• 🔧 内置功能：自带序号列、多选列、更新人/时间列，支持列排序。

---

2. 基础用法

2.1 自动请求模式 (推荐)

只需传入 requestApi 和列定义，组件会自动处理初始请求、分页切换和 Loading 状态。

<template>
  <pc-table 
    :request-api="fetchUserList" 
    :colum-list="columns"
    :req-params="{ status: 1 }"
  >
    <template #status="{ row }">
      <el-tag>{{ row.status === 1 ? '活跃' : '禁用' }}</el-tag>
    </template>

    <template #action="{ row }">
      <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
    </template>
  </pc-table>
</template>

<script setup lang="ts">
const columns: ITableColumList = [
  { label: '用户名', prop: 'username', minWidth: 120 },
  { label: '状态', prop: 'status', width: 100 },
];

const fetchUserList = (params) => {
  // params 包含 pageNo, pageSize 和 reqParams
  return api.getUserList(params); 
};
</script>

---

3. 配置指南

3.1 自定义列渲染 (Render 函数)

通过列配置中的 render 属性，可以直接使用 TSX 或 h 函数。

const columns: ITableColumList = [
  {
    label: '标题',
    prop: 'title',
    render: (scope) => h('b', { style: 'color: red' }, scope.row.title)
  }
];

3.2 排序与固定列

const columns: ITableColumList = [
  { label: '创建时间', prop: 'gmtCreate', sortable: 'custom', fixed: 'left' }
];

---

4. API 详解

4.1 Props 属性

参数	说明	类型	默认值
columList	列配置列表（详见下表）	IColumList	[]
requestApi	自动请求接口的方法	(params) => Promise	-
reqParams	请求接口时的额外参数	any	{}
tableList	手动传入的数据源（设置后进入手动模式）	T[]	-
requestImmediate	是否在组件挂载后立即请求	boolean	true
selection	是否显示多选框	boolean	false
typeIndex	是否显示编号（序号）	boolean	false
lastModifyColu	是否显示“更新人/更新时间”快捷列	boolean	true
hidePagination	是否隐藏分页条	boolean	false
actionWidth	操作列宽度	number	180
handleData	接口返回后的数据预处理钩子	(data) => data	-

4.2 IColumItem 配置

属性	说明	类型
label	列头文案	string
prop	字段名（需与插槽名对应）	string
render	使用 h 函数自定义渲染内容	TableRenderFn
width/minWidth	列宽度	number
fixed	固定列	（'left' | 'right'）
sortable	排序配置	boolean | custom

4.3 Slots 插槽

插槽名	说明	作用域参数
[prop]	自定义列内容	{ row, column, $index }
header-[prop]	自定义表头内容	{ column, $index }
action	操作列内容	{ row, column, $index }

4.4 Expose 方法

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

方法名	说明
requestData('reset' | 'default')	触发刷新，reset 会回到第一页
reload()	重新加载当前页数据

---

5. 常见问题

Q: 如何实现外部搜索刷新？ A: 修改 reqParams 后，调用组件实例的 requestData('reset') 即可。

Q: 手动模式下支持分页吗？ A: 支持。如果传入了 tableList 但未配置 requestApi，组件会根据 tableList.length 显示分页，但此时通常建议由父组件配合 v-model:pageIndex 处理逻辑。

---