JNPF后台常收到类似疑问：
-
列表怎么加左侧树？
-
APP 端列表字段不显示咋回事？
其实 “列表设计” 的核心是 “布局选对 + 多端适配”，今天把列表布局配置、字段设置和 PC/APP 差异拆透，帮你快速做出符合业务需求的列表，避开配置中的 “隐形坑”。
一、先明确：列表设计的核心定位与操作入口
列表设计是控制数据展示效果的关键模块，比如 “员工列表” 用普通表格、“部门 - 员工层级数据” 用树形表格，操作入口很固定：进入表单设计 → 切换到「列表设计」标签页面默认分 “查询字段（怎么搜数据）”“列表字段（显示哪些列）”“列表属性（整体样式）” 三大块，还能切换 “PC 端 / 移动端” 分别配置，所有操作实时生效。
二、核心操作：列表设计 3 大模块拆解（附布局案例）
列表设计的操作围绕 “列表属性（布局 + 全局配置）”“列表字段（显示列）”“查询字段（筛选条件）” 展开，重点看布局选择和多端适配：
1. 列表属性：选对布局是关键（仅 PC 端支持多布局）
列表属性决定列表的整体展示形式，PC 端支持 5 种布局，APP 端仅支持默认表格，先记清布局差异和适用场景：
布局配置步骤：在 “列表属性” 的 “表格配置” 中选择目标布局，以 “左侧树 + 普通表格” 为例：
-
选 “左侧树 + 普通表格”，配置左侧树的数据源（如 “部门表”）；
-
关联右侧表格数据（如 “员工表”），设置树节点与表格的关联字段（如 “部门 ID”）；
-
保存后，左侧点击部门，右侧自动显示该部门的员工数据，层级关系清晰。
避坑提醒：分组表格不支持分页和合计，树形表格需确保数据有父子关联字段（如 “parent_id”），否则无法展示层级。
2. 列表字段：控制显示哪些列（PC 更灵活）
列表字段决定哪些数据列展示在列表中，PC 和 APP 配置权限不同，操作步骤一致：
-
勾选字段：在 “列表字段” 区勾选需要显示的字段（如 “姓名”“部门”“入职日期”）；
-
调整配置：PC 端：可自定义 “列名（如把 “user_name” 改 “姓名”）”“排序（是否默认排序）”“冻结（固定关键列）”“对齐方式”“宽度”；APP 端：仅支持勾选字段和修改 “列名”，宽度和对齐会自动适配手机屏幕；
-
拖动排序：拖动字段可调整列的显示顺序（PC 和 APP 各自独立）。
场景示例：做 “采购订单列表”，PC 端勾选 “订单号、供应商、金额、状态”，冻结 “订单号” 列；APP 端只勾选 “订单号、金额、状态”，避免列太多挤在一起。
3. 查询字段：控制怎么筛选数据（PC/APP 规则一致）
查询字段是列表顶部的筛选条件，配置逻辑和表单查询字段一致，重点看 2 个关键设置：
-
条件类型：根据字段类型匹配（如 “姓名” 用 “模糊查询”，“金额” 用 “范围查询”）；
-
是否多选：部分字段（如下拉选择、组织选择）支持多选，勾选后用户可选多个值（如同时选 “技术部、行政部”），按 “或” 逻辑筛选。
避坑：APP 端查询字段的输入类型会自动适配（如 “日期” 显日期选择器），无需额外配置，只需确保勾选需要的字段。
三、关键差异：PC 端 vs APP 端配置权限对比
很多人配置时忽略多端差异，导致 APP 端显示异常，先记清核心差异点：
示例：PC 端 “订单列表” 用 “左侧树 + 普通表格”（左侧订单分类，右侧订单明细），APP 端自动显示普通表格，仅保留 “订单号、金额、状态” 字段，更适配手机屏幕。
四、避坑要点：4 个常见问题解答
-
**PC 端选 “分组表格” 后，分页消失了？**正常现象，分组表格不支持分页，会显示全部数据，若数据量大，建议改用 “普通表格 + 查询字段” 筛选，避免加载卡顿。
-
**APP 端列表字段勾选后不显示？**先检查 “列表设计” 是否切换到 “APP 端” 标签，PC 端勾选的字段不会同步到 APP 端，需在 APP 端重新勾选；再确认字段是否超出屏幕宽度，APP 端会自动隐藏过宽字段，建议只保留核心列。
-
**左侧树 + 普通表格布局，右侧表没数据？**没配置树与表格的关联字段，进入 “列表属性 - 左侧树配置”，设置左侧树的 “关联字段”（如部门 ID）与右侧表的对应字段一致，左侧点击树节点才会联动显示数据。
-
**编辑表格无法行内编辑？**需在 “列表属性 - 编辑表格配置” 中勾选 “允许行内编辑”，并指定可编辑字段（如 “库存数量”），未勾选的字段无法编辑。
列表设计的核心是 “先按业务选布局，再按端适配字段”：层级数据用树形 / 左侧树布局，简单数据用普通表格；PC 端多配细节（冻结、对齐），APP 端精简字段。比如做 “组织架构列表”，PC 端用 “树形表格” 展示层级，APP 端用普通表格只显 “组织名称、负责人”，既清晰又适配。如果遇到布局不生效、数据联动失败等问题，欢迎在评论区留言，我会帮你分析解决～
