amis/docs/components/form/table.md

252 lines
6.5 KiB
Markdown
Raw Normal View History

2020-07-28 10:03:53 +08:00
---
title: Table 表格
2020-07-29 17:33:14 +08:00
description:
2020-07-28 10:03:53 +08:00
type: 0
group: null
menuName: Table 表格
2020-07-29 17:33:14 +08:00
icon:
2020-07-28 10:03:53 +08:00
order: 54
---
2020-07-29 17:33:14 +08:00
2020-07-28 10:03:53 +08:00
## 基本用法
可以用来展示数组类型的数据。配置`columns` 数组,来定义列信息。
```schema:height="700" scope="body"
{
"type": "form",
"debug": "true",
"data": {
"table": [
{
"a": "a1",
"b": "b1"
},
{
"a": "a2",
"b": "b2"
},
{
"a": "a3",
"b": "b3"
}
]
},
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type":"table",
"name":"table",
"columns":[
{
"name": "a",
"label": "A"
},
{
"name": "b",
"label": "B"
}
]
}
]
}
```
我们为表单数据域设置了`table`变量,配置`table`表单项可以展示该数据
## 可新增行
可以配置`addable`和`editable`指定可以新增且编辑行数据
```schema:height="700" scope="body"
{
"type": "form",
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type":"table",
"name":"table",
"addable": true,
"editable": true,
"columns":[
{
"name": "a",
"label": "A"
},
{
"name": "b",
"label": "B"
}
]
}
]
}
```
### 按钮触发新增行
按钮上配置`"actionType": "add"`和`target`指定表格`name`,可以实现点击按钮添加一行的效果。
```schema:height="400" scope="body"
{
"type": "form",
"data": {
"table": [
{
"a": "a1",
"b": "b1"
},
{
"a": "a2",
"b": "b2"
},
{
"a": "a3",
"b": "b3"
}
]
},
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type": "table",
"name": "table",
"label": "Table",
"columns": [
{
"label": "A",
"name": "a"
},
{
"label": "B",
"name": "b"
}
]
},
{
"type": "button",
"label": "Table新增一行",
"target": "table",
"actionType": "add"
}
]
}
```
### 编辑行配置
还可以在列上配置`quickEdit`实现编辑配置,更多配置参考 [快速编辑](../crud#%E5%BF%AB%E9%80%9F%E7%BC%96%E8%BE%91)
```schema:height="400" scope="body"
{
"type": "form",
"data": {
"table": [
{
"a": "a1",
"b": "b1"
},
{
"a": "a2",
"b": "b2"
},
{
"a": "a3",
"b": "b3"
}
]
},
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type": "table",
"name": "table",
"label": "Table",
"columns": [
{
"label": "A",
"name": "a",
"quickEdit": true
},
{
"label": "B",
"name": "b",
"quickEdit": true
}
]
}
]
}
```
## 可拖拽
配置`"draggable": true`,实现可拖拽调整顺序
```schema:height="400" scope="body"
{
"type": "form",
"data": {
"table": [
{
"a": "a1",
"b": "b1"
},
{
"a": "a2",
"b": "b2"
},
{
"a": "a3",
"b": "b3"
}
]
},
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type": "table",
"name": "table",
"label": "Table",
"draggable": true,
"columns": [
{
"label": "A",
"name": "a"
},
{
"label": "B",
"name": "b"
}
]
}
]
}
```
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| ---------------------------- | ----------------------- | ---------------- | ---------------------------------------- |
| type | `string` | `"table"` | 指定为 Table 渲染器 |
| addable | `boolean` | `false` | 是否可增加一行 |
| editable | `boolean` | `false` | 是否可编辑 |
| removable | `boolean` | `false` | 是否可删除 |
| showAddBtn | `boolean` | `true` | 是否显示添加按钮 |
2020-07-29 17:33:14 +08:00
| addApi | [API](../../types/api) | - | 新增时提交的 API |
| updateApi | [API](../../types/api) | - | 修改时提交的 API |
| deleteApi | [API](../../types/api) | - | 删除时提交的 API |
2020-07-28 10:03:53 +08:00
| addBtnLabel | `string` | | 增加按钮名称 |
| addBtnIcon | `string` | `"fa fa-plus"` | 增加按钮图标 |
| updateBtnLabel | `string` | `""` | 更新按钮名称 |
| updateBtnIcon | `string` | `"fa fa-pencil"` | 更新按钮图标 |
| deleteBtnLabel | `string` | `""` | 删除按钮名称 |
| deleteBtnIcon | `string` | `"fa fa-minus"` | 删除按钮图标 |
| confirmBtnLabel | `string` | `""` | 确认编辑按钮名称 |
| confirmBtnIcon | `string` | `"fa fa-check"` | 确认编辑按钮图标 |
| cancelBtnLabel | `string` | `""` | 取消编辑按钮名称 |
| cancelBtnIcon | `string` | `"fa fa-times"` | 取消编辑按钮图标 |
| columns | `array` | [] | 列信息 |
| columns[x].quickEdit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 |
| columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |