示例：查询表格

import {  RenderDataGrid,  RenderFieldPresenter,  RenderFormPanel,  RenderTextBox,  RenderToolbar,} from 'ds-ui'

查询表格是业务系统中最常见的页面：上方查询条件，中间工具栏，下方数据表格。它适合患者列表、模板列表、字典维护、任务列表等场景。

页面结构

StackPanel vertical
  查询条件
  工具栏
  DataGrid flex=1

表格应该占用剩余空间，并由自身管理滚动、选择、复制、排序和筛选。不要在表格外再套一个同方向滚动容器。

最小示例

const query = new RenderFormPanel({ columns: 3, labelWidth: 80, adaptive: true })query.addField(new RenderFieldPresenter({  label: '关键字',  child: new RenderTextBox({ placeholder: '名称或编码' }),})) const toolbar = new RenderToolbar({  groups: [{    id: 'main',    slot: 'leading',    items: [      { id: 'search', kind: 'button', label: '查询' },      { id: 'reset', kind: 'button', label: '重置' },    ],  }],}) const grid = new RenderDataGrid({  columns: [    { key: 'name', title: '名称', type: 'text', width: 160, sortable: true },    { key: 'status', title: '状态', type: 'text', width: 100, sortable: true },  ],  rows: data,  sortable: true,})

页面状态

查询页建议维护这些状态：

• 查询条件。
• 加载状态。
• 当前结果集。
• 当前选中行。
• 分页信息或滚动位置。
• 错误信息。

查询条件变化不一定马上请求服务。可以在点击查询、按 Enter 或命令触发时统一提交。

命令建议

常见命令：

• 查询。
• 重置。
• 新增。
• 编辑。
• 删除。
• 导出。

编辑、删除和导出通常依赖选中行，应在表格选中变化时刷新命令状态。

性能注意

• 大结果集使用表格虚拟滚动。
• 查询结果替换时，只更新当前页面数据，不重建工作台。
• 自动列宽需要限制采样数量。
• hover 和选中不要触发整页 layout。

常见错误

• 把查询条件放成全局状态，导致多个查询页互相影响。
• 表格外层再加滚动容器，导致滚动条行为不一致。
• 每次输入查询条件就请求服务，造成无意义刷新。
• 删除命令只看权限，不看当前是否选中行。