示例：可编辑表格

import { RenderDataGrid, RenderStackPanel, RenderToolbar } from 'ds-ui'

可编辑表格适合维护明细行、配置项、字典项和录入清单。核心难点不是让单元格能输入，而是处理校验、提交、撤销、权限和大数据性能。

页面结构

StackPanel vertical
  工具栏
  DataGrid flex=1
  状态栏

表格本身负责单元格编辑、选中和复制。页面负责数据源、校验结果和提交动作。

数字列进入编辑状态后会显示上下步进按钮，也可以使用 ArrowUp、ArrowDown 按 step 调整当前草稿。按钮和最终提交共用 decimals、min、max 归一化规则，步进过程不会直接提交业务数据。

基本结构

const grid = new RenderDataGrid({  columns: [    { key: 'name', title: '项目', type: 'text', width: 180 },    { key: 'value', title: '值', type: 'number', width: 160, step: 0.5, decimals: 1 },    { key: 'enabled', title: '启用', type: 'checkbox', width: 80 },  ],  rows: data,  editable: true,}) const page = new RenderStackPanel({  orientation: 'vertical',  spacing: 8,  crossAxisAlignment: 'stretch',})page.addChild(new RenderToolbar({ groups: [] }))page.addChild(grid, 1)

编辑模型

推荐把编辑状态放在页面层：

• 原始数据。
• 当前草稿行。
• 新增行集合。
• 修改行集合。
• 删除行集合。
• 单元格校验错误。

提交时由页面层把变化集合转换为业务请求。不要让每个单元格直接调用后端服务。

常用命令

• 新增行。
• 删除行。
• 保存修改。
• 撤销当前行。
• 复制当前单元格或选中行。
• 导入或导出。

删除、撤销、保存这些命令要结合权限和编辑状态判断启用。

校验策略

校验应该支持两级：

• 单元格级：必填、长度、格式。
• 行级：字段组合规则，例如开始时间不能晚于结束时间。

校验结果要能定位到具体行列，方便表格绘制错误状态或 tooltip。

性能注意

大表格编辑要避免每次输入都重建全部 rows。推荐只更新变化行，或者让数据模型保持稳定行对象。

如果需要批量粘贴大量行，应走批处理路径，避免每个单元格都触发一次布局和命令刷新。