ProTable requestApi 模式迁移优势详解

ProTable requestApi 模式迁移优势详解

1. 简化代码结构

手动模式	requestApi 模式
需要管理 list, loading, total, currentPage, pageSize 等多个状态	只需一个 fetchXxx 函数
需要手动处理分页、搜索、刷新逻辑	ProTable 自动处理
代码冗余，每个页面重复相似逻辑	逻辑封装在组件内部

示例对比：

      

        

          
            复制
          
        
        
<!-- 手动模式 - 需要管理多个状态 -->
<pro-table
  :data="list"
  :loading="loading"
  :total="total"
  :current-page="currentPage"
  :page-size="pageSize"
  @refresh="loadList"
  @page-change="handlePageChange"
  @search="handleSearch"
/>

<!-- requestApi 模式 - 只需一个函数 -->
<pro-table
  :request-api="fetchList"
  :columns="columns"
/>

      
    

2. 自动处理 Loading 状态

• 手动模式：需要手动设置 loading.value = true/false
• requestApi 模式：ProTable 自动在请求期间显示 loading

3. 内置搜索功能

• 手动模式：需要单独实现搜索表单和搜索逻辑
• requestApi 模式：列配置添加 searchable: true 即可自动生成搜索表单

      

        

          
            复制
          
        
        
// 列配置添加 searchable
const columns = ref([
  { prop: 'code', label: '编码', searchable: true },
  { prop: 'name', label: '名称', searchable: true },
])

      
    

4. 自动分页处理

• 手动模式：需要手动计算分页参数、处理页码变化
• requestApi 模式：ProTable 自动传递 page 和 pageSize 参数

5. 统一的数据刷新机制

      

        

          
            复制
          
        
        
// 手动模式 - 每个操作后需要手动调用
await deleteItem(id)
loadList() // 需要手动刷新

// requestApi 模式 - 使用 refresh()
await deleteItem(id)
tableRef.value?.refresh() // 自动刷新当前页

      
    

6. localStorage 列配置持久化

• 通过 table-key 属性自动保存用户列配置
• 用户调整列宽、列顺序后会自动保存

7. 代码量减少统计

页面	原行数	新行数	减少
MaterialManagement	438	344	-21%
InventoryManagement	434	358	-18%
WarehouseManagement	~400	317	-21%
InboundManagement	457	415	-9%
OutboundManagement	493	450	-9%

平均减少约 15-20% 的代码量

8. 更好的可维护性

• 业务逻辑集中在 fetchXxx 函数中
• 减少了模板和逻辑之间的耦合
• 统一的错误处理机制

9. TypeScript 支持更好

• 手动模式需要为多个状态定义类型
• requestApi 模式只需定义数据项类型

10. 响应式优化

• ProTable 内部优化了数据响应式处理
• 减少了不必要的重渲染

---