查询表格页

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

查询表格页是业务系统最基础的列表维护模式：上方输入查询条件，中间放操作工具栏，下方放数据表格。

推荐布局

StackPanel vertical
  PageHeader
  Query Form
  Toolbar
  DataGrid flex=1

表格区域应该占满剩余高度，并由表格自身管理滚动、选中、复制、排序、筛选和编辑。

最小示例

const page = new RenderStackPanel({  orientation: 'vertical',  spacing: 8,  crossAxisAlignment: 'stretch',}) 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', sortable: true },    { key: 'dept', title: '科室', type: 'text', sortable: true },  ],  rows: data,  sortable: true,}) page.addChild(new RenderText('患者查询'))page.addChild(query)page.addChild(toolbar)page.addChild(grid, 1)

状态管理

查询页通常至少有这些状态：

• 查询条件。
• 当前页码或分页游标。
• 表格数据。
• 当前选中行。
• 加载状态和错误信息。

这些状态属于页面级上下文或页面 controller，不应该放到全局上下文。

命令设计

常见命令包括：

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

其中编辑、删除、导出通常依赖当前选中行，canExecute 应在选中变化后重新求值。

性能规则

• 大数据列表必须使用表格自身的虚拟滚动能力。
• 查询结果变更时不要重建整个工作台，只更新当前页面数据。
• 列宽自动适配需要限制采样数量，避免大数据全量测量。
• 表格滚动容器不要再套一层同方向 ScrollViewer。