fix: InputTable使用operation列无法正常渲染问题

This commit is contained in:
lurunze1226 2023-05-11 20:34:41 +08:00
parent fdc3872491
commit 2af2f35fa6
2 changed files with 41 additions and 19 deletions

View File

@ -249,6 +249,7 @@ order: 54
"type": "input-table",
"name": "table",
"label": "Table",
"needConfirm": false,
"columns": [
{
"label": "A",
@ -257,6 +258,17 @@ order: 54
{
"label": "B",
"name": "b"
},
{
"type": "operation",
"label": "操作",
"buttons": [
{
"label": "删除",
"type": "button",
"level": "link"
}
]
}
]
},
@ -789,6 +801,7 @@ order: 54
]
}
```
## 表单项校验
> 2.8.1 及以上版本
@ -853,13 +866,13 @@ order: 54
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| ---------------------------- | ----------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------- |
| ---------------------------- | ----------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------- | --- |
| type | `string` | `"input-table"` | 指定为 Table 渲染器 |
| addable | `boolean` | `false` | 是否可增加一行 |
| editable | `boolean` | `false` | 是否可编辑 |
| removable | `boolean` | `false` | 是否可删除 |
| showTableAddBtn | `boolean` | `true` | 是否显示表格操作栏添加按钮,前提是要开启可新增功能 |
| showFooterAddBtn | `boolean` | `true` | 是否显示表格下方添加按,前提是要开启可新增功能 |钮 |
| showTableAddBtn | `boolean` | `true` | 是否显示表格操作栏添加按钮,前提是要开启可新增功能 |
| showFooterAddBtn | `boolean` | `true` | 是否显示表格下方添加按,前提是要开启可新增功能 | 钮 |
| addApi | [API](../../../docs/types/api) | - | 新增时提交的 API |
| footerAddBtn | [SchemaNode](../../docs/types/schemanode) | - | 底部新增按钮配置 |
| updateApi | [API](../../../docs/types/api) | - | 修改时提交的 API |
@ -887,9 +900,10 @@ order: 54
| columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |
## 事件表
当前组件会对外派发以下事件可以通过onEvent来监听这些事件并通过actions来配置执行的动作在actions中可以通过${事件参数名}来获取事件产生的数据(< 2.3.2 及以下版本 ${event.data.[事件参数名]}详细请查看事件动作
[name]表示当前组件绑定的名称即name属性如果没有配置name属性则通过value取值。
当前组件会对外派发以下事件,可以通过 onEvent 来监听这些事件,并通过 actions 来配置执行的动作,在 actions 中可以通过${事件参数名}来获取事件产生的数据(< 2.3.2 及以下版本 ${event.data.[事件参数名]}详细请查看事件动作
[name]表示当前组件绑定的名称,即 name 属性,如果没有配置 name 属性,则通过 value 取值。
| 事件名称 | 事件参数 | 说明 |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
@ -910,10 +924,10 @@ order: 54
当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
| 动作名称 | 动作配置 | 说明 |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- |
| addItem | `item: object\|Array<object>` 添加的数据<br />`index: number` 指定添加的位置,如果未指定则在数据尾端插入 | 在已有数据的基础上插入数据 |
| 动作名称 | 动作配置 | 说明 |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| addItem | `item: object\|Array<object>` 添加的数据<br />`index: number` 指定添加的位置,如果未指定则在数据尾端插入 | 在已有数据的基础上插入数据 |
| deleteItem | `condition:` 删除条件[表达式](../../../docs/concepts/expression),用于支持批量删除的场景<br /> `index: number ` 指定删除哪一行数据 | 删除某一行数据 |
| setValue | `value: object \| Array<object>` 替换的值<br /> `index?: number` 可选,替换第几行数据,如果没有指定,则替换全部表格数据 | 替换表格数据 |
| clear | - | 清空表格数据 |
| reset | - | 将表格数据重置为`resetValue`,若没有配置`resetValue`,则清空表格数据 |
| setValue | `value: object \| Array<object>` 替换的值<br /> `index?: number` 可选,替换第几行数据,如果没有指定,则替换全部表格数据 | 替换表格数据 |
| clear | - | 清空表格数据 |
| reset | - | 将表格数据重置为`resetValue`,若没有配置`resetValue`,则清空表格数据 |

View File

@ -989,14 +989,18 @@ export default class FormTable extends React.Component<TableProps, TableState> {
? omit(column, ['quickEdit'])
: {
...column,
quickEdit: {
...this.columnToQuickEdit(column),
...quickEdit,
saveImmediately: true,
mode: 'inline',
disabled,
static: isStatic
}
...(column.type === 'operation'
? {}
: {
quickEdit: {
...this.columnToQuickEdit(column),
...quickEdit,
saveImmediately: true,
mode: 'inline',
disabled,
static: isStatic
}
})
};
});
} else if (
@ -1234,6 +1238,10 @@ export default class FormTable extends React.Component<TableProps, TableState> {
? operation.buttons.concat()
: [];
operation.buttons.unshift.apply(operation.buttons, btns);
if (operation.hasOwnProperty('quickEdit')) {
delete operation.quickEdit;
}
}
if (showIndex) {