使用可编辑表格 EditableTable

将可编辑表格配置为在 Dialog 中新增和编辑

1. 往 “可编辑表格” 组件的工具栏处拖拽进去一个按钮。

2. 对此按钮做常规的 “打开弹窗” 的设置。

3. 在可编辑表格的数据源表单中，在上面 “打开弹窗” 按钮选择的布局中添加两个按钮。其中保存按钮做如下设置。

4. 此时，去表单试运行的页面，就可以通过 Toolbar 的按钮通过 Dialog 添加行了。

5. 返回表单设计器，在可编辑表格最后一列上面右键，选择 “在后面添加列”

6. 添加两个自定义按钮，一个 “编辑” 按钮，一个 “删除” 按钮。

7. 同时，选中改可编辑表格，反选掉 “显示新增按钮”，以去掉默认显示在表格下方的 “新增行” 按钮。

8. 此时，去表单试运行页面，刷新页面，在可编辑表格处新增一行，就可以通过 “操作” 列的两个按钮进行编辑和删除了。

动态修改表格列

参考 使用表格 Table 中的 “动态修改表格列” 部分。

通过 JS 任意修改表格数据

提示

可编辑表格的数据就在表单数据当中，请尽量使用 formApi.setValue 来修改可编辑表格的数据，否则可能会遇到 Uncaught (in promise) TypeError: Cannot assign to read only property 'text' of object '#<Object>' 的错误。

例如，以下示例中，先添加了 3 行数据，然后点击 Toolbar 的 修改数据 按钮通过 JS 代码修改了一行数据、添加了一行、同时删除了一行。

设计器中的配置如下：

此示例的 JS 代码如下：

formApi.registerMethod('changeEditableTableData', () => {
  const tableData = formApi.getValue('626d5501');

  // 先浅拷贝一份，这样才能操作数组修改数据
  const newTableData = [...tableData];

  // 修改第一行的 text 列的数据为 New Text
  // 注意：不能使用 newTableData[0].text = 'New Text'，因为数据在 redux 里，对象都是 readonly 的，所以需要用 { ... } copy 一份的方式修改
  newTableData[0] = { ...newTableData[0], text: 'New Text' };

  // 删除第二行
  newTableData.splice(1, 1);

  // 插入一条新的数据
  newTableData.push({ text: 'New Line ', number: 123 });

  // 重新设置回表单数据
  formApi.setValue('626d5501', newTableData);
});

API

完整的 EditableTable API 参考在此处 EditableTable