CC/ruoyi-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1cd54adb06267fdda7159cfeb3554d73f23b3b17
ruoyi-vue/update-list-pages.md
荒 f36dc4f3d3 1
2025-10-05 03:09:15 +08:00

2.6 KiB
Raw Blame History

全局列表页面固定分页布局更新指南

已完成的页面

  • ✅ 京粉订单列表 (src/views/system/orderrows/index.vue) - 已使用自定义布局
  • ✅ 角色管理 (src/views/system/role/index.vue) - 已使用ListLayout组件
  • ✅ 超级管理员 (src/views/system/superadmin/index.vue) - 已使用ListLayout组件

待更新的页面列表

以下是项目中其他需要更新为固定分页布局的列表页面：

系统管理模块

  • src/views/system/user/index.vue - 用户管理（特殊布局，需要单独处理）
  • src/views/system/post/index.vue - 岗位管理
  • src/views/system/notice/index.vue - 通知公告
  • src/views/system/dict/index.vue - 字典管理
  • src/views/system/dict/data.vue - 字典数据
  • src/views/system/config/index.vue - 参数设置

监控模块

  • src/views/monitor/operlog/index.vue - 操作日志
  • src/views/monitor/job/log.vue - 调度日志
  • src/views/monitor/logininfor/index.vue - 登录日志
  • src/views/monitor/job/index.vue - 定时任务
  • src/views/monitor/online/index.vue - 在线用户

工具模块

  • src/views/tool/gen/index.vue - 代码生成

业务模块

  • src/views/system/jdorder/orderList.vue - 京东订单列表
  • src/views/system/xbmessage/index.vue - 消息管理
  • src/views/system/favoriteProduct/index.vue - 收藏商品
  • src/views/system/xbgroup/index.vue - 群组管理

更新步骤

方法一：使用ListLayout组件（推荐）

  1. 在页面中导入ListLayout组件：
import ListLayout from "@/components/ListLayout";

export default {
  components: {
    ListLayout
  },
  // ...
}
  1. 将页面结构改为：
<template>
  <list-layout>
    <!-- 搜索区域 -->
    <template #search>
      <!-- 原来的搜索表单和操作按钮 -->
    </template>

    <!-- 表格区域 -->
    <template #table>
      <!-- 原来的el-table -->
    </template>

    <!-- 分页区域 -->
    <template #pagination>
      <!-- 原来的pagination组件 -->
    </template>
  </list-layout>
</template>

方法二：直接修改CSS（适用于特殊布局）

参考 src/views/system/orderrows/index.vue 的实现方式，直接修改页面样式。

注意事项

  1. 用户管理页面使用了splitpanes布局，需要特殊处理
  2. 确保所有页面都保持原有的功能不变
  3. 测试分页导航在不同数据量下的表现
  4. 保持响应式设计在移动端的良好表现

测试要点

  • 分页导航固定在页面底部
  • 表格内容可以独立滚动
  • 搜索区域固定在顶部
  • 移动端显示正常
  • 所有原有功能正常工作