Skip to content

Commit

Permalink
chore:inputTable添加行内联动例子 (#8858)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hsm-lv
hsm-lv committed Nov 22, 2023
1 parent 06fc8a8 commit c74f6a4
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 17 deletions.
32 changes: 15 additions & 17 deletions docs/zh-CN/components/crud.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1074,7 +1074,7 @@ amis 只负责生成下拉选择器组件，并将搜索参数传递给接口，

#### 下拉数据源

过滤器的数据域支持API接口和上下文数据(`3.6.0`及以上版本)
过滤器的数据域支持 API 接口和上下文数据(`3.6.0`及以上版本)

```schema
{
Expand Down Expand Up @@ -3378,22 +3378,22 @@ itemAction 里的 onClick 还能通过 `data` 参数拿到当前行的数据，
除了 Table 组件默认支持的列配置，CRUD 的列配置还额外支持以下属性：

| 属性名 | 类型 | 默认值 | 说明 | 版本 |
| ------------------ | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- | --- |
| ------------------ | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- | ---- |
| sortable | `boolean` | `false` | 是否可排序 |
| searchable | `boolean` \| `Schema` | `false` | 是否可快速搜索，开启`autoGenerateFilter`后，`searchable`支持配置`Schema` |
| filterable | `boolean` \| [`QuickFilterConfig`](./crud.md#quickfilterconfig) | `false` | 是否可快速搜索，`options`属性为静态选项，支持设置`source`属性从接口获取选项 |
| quickEdit | `boolean` \| [`QuickEditConfig`](./crud.md#quickeditconfig) | - | 快速编辑，一般需要配合`quickSaveApi`接口使用 |
| quickEditEnabledOn | `SchemaExpression` | - | 开启快速编辑条件[表达式](../../docs/concepts/expression) | |
| quickEditEnabledOn | `SchemaExpression` | - | 开启快速编辑条件[表达式](../../docs/concepts/expression) | |

#### QuickFilterConfig

| 属性名 | 类型 | 默认值 | 说明 | 版本 |
| ------------- | ----------------------------- | ------- | -------------------------------------------------------- | ------- |
| options | `Array<any>` | - | 静态选项 | |
| multiple | `boolean` | `false` | 是否支持多选 | |
| source | [`Api`](../../docs/types/api) \| `string` | - | 选项 API 接口 | `3.6.0`版本后支持上下文变量 |
| refreshOnOpen | `boolean` | `false` | 配置 source 前提下，每次展开筛选浮层是否重新加载选项数据 | `2.9.0` |
| strictMode | `boolean` | `false` | 严格模式，开启严格模式后，会采用 JavaScript 严格相等比较 | `2.3.0` |
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
| ------------- | ----------------------------------------- | ------- | -------------------------------------------------------- | --------------------------- |
| options | `Array<any>` | - | 静态选项 | |
| multiple | `boolean` | `false` | 是否支持多选 | |
| source | [`Api`](../../docs/types/api) \| `string` | - | 选项 API 接口 | `3.6.0`版本后支持上下文变量 |
| refreshOnOpen | `boolean` | `false` | 配置 source 前提下，每次展开筛选浮层是否重新加载选项数据 | `2.9.0` |
| strictMode | `boolean` | `false` | 严格模式，开启严格模式后，会采用 JavaScript 严格相等比较 | `2.3.0` |

#### QuickEditConfig

Expand Down Expand Up @@ -4948,7 +4948,7 @@ value 结构说明：

#### 行记录中字段赋值

需要通过表达式配置动态`name`或`id`和`componentName`或`componentId`。例如修改`engine`选中状态的同时选中`version`，勾选`id`的同时去掉对`engine`的选中。
需要通过表达式配置动态`id`和`componentId`。例如修改`engine`选中状态的同时选中`version`，勾选`id`的同时去掉对`engine`的选中。

```schema: scope="body"
{
Expand All @@ -4960,13 +4960,12 @@ value 结构说明：
{
"name": "id",
"label": "ID",
"id": "u:3db3f2b1b99e",
"onEvent": {
"click": {
"actions": [
{
"actionType": "setValue",
"componentId": "u:4868d7db0139_${index}",
"componentId": "version_${index}",
"args": {
"value": false
}
Expand All @@ -4981,13 +4980,12 @@ value 结构说明：
"label": "engine",
"quickEdit": true,
"quickEditEnabledOn": "this.id < 5",
"id": "u:0b9be99f3403",
"onEvent": {
"change": {
"actions": [
{
"actionType": "setValue",
"componentName": "version_${index}",
"componentId": "version_${index}",
"args": {
"value": true
}
Expand All @@ -4997,12 +4995,12 @@ value 结构说明：
}
},
{
"name": "version_${index}",
"name": "version",
"type": "checkbox",
"label": "version",
"quickEdit": true,
"quickEditEnabledOn": "this.id < 5",
"id": "u:4868d7db0139_${index}"
"id": "version_${index}"
}
],
"id": "u:f5bad706d7c5"
Expand Down
72 changes: 72 additions & 0 deletions docs/zh-CN/components/form/input-table.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1901,6 +1901,7 @@ order: 54
{
"type": "button",
"label": "新增一行（未指定添加位置）",
"className": "mr-2",
"onEvent": {
"click": {
"actions": [
Expand Down Expand Up @@ -1985,6 +1986,7 @@ order: 54
{
"type": "button",
"label": "删除行（指定行号）",
"className": "mr-2",
"onEvent": {
"click": {
"actions": [
Expand Down Expand Up @@ -2184,6 +2186,7 @@ order: 54
{
"type": "button",
"label": "更新index为1和3的行记录",
"className": "mr-2",
"onEvent": {
"click": {
"actions": [
Expand All @@ -2205,6 +2208,7 @@ order: 54
{
"type": "button",
"label": "更新a=a3的行记录",
"className": "mr-2",
"onEvent": {
"click": {
"actions": [
Expand Down Expand Up @@ -2315,6 +2319,74 @@ order: 54
}
```

#### 行记录内表单项联动

需要通过表达式配置动态 `id` 和 `componentId`。

```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-table",
"label": "表格表单",
"id": "setValue-input-table",
"name": "table",
"columns": [
{
"type": "input-number",
"name": "num1",
"label": "数量",
"onEvent": {
"change": {
"actions": [
{
"actionType": "setValue",
"componentId": "num2_${index}",
"args": {
"value": "${num1 * 10}"
}
}
]
}
}
},
{
"name": "num2",
"id": "num2_${index}",
"label": "金额"
}
],
"addable": true,
"footerAddBtn": {
"label": "新增",
"icon": "fa fa-plus",
"hidden": true
},
"strictMode": true,
"minLength": 0,
"needConfirm": false,
"showTableAddBtn": false
}
],
"data": {
"table": [
{
"id": 1,
"num1": 1,
"num2": "10"
},
{
"id": 2,
"num1": "2",
"num2": 20
}
]
}
}
```

### clear

```schema: scope="body"
Expand Down

0 comments on commit c74f6a4

Please sign in to comment.