amis/docs/zh-CN/components/form/matrix.md
吴多益 0ae04ce946
docs:将文档移动 zh-CN 目录下;为以后支持英文版做准备 (#1309)
* docs:将文档移动 zh-CN 目录下;为以后支持英文版做准备

* 整理 autoFill

* 补充下载最新版本的说明 (#1298)

* fix: 修复在新版 Firefox 下 js sdk 报错 (#1300)

* 删掉可能报错的代码 (#1311)

* fix: 修复 css 变量不支持数字问题 (#1302)

* feat:增加 animation-duration,可以控制所有动画时长,也能用于一次性关闭所有动画效果 (#1303)

* feat:增加 animation-duration,可以控制所有动画时长,也能用于一次性关闭所有动画效果

* 补充文档

* Pageleave (#1310)

* form 添加页面离开提示功能

* 补充文档

Co-authored-by: 2betop <2betop.cn@gmail.com>
Co-authored-by: liaoxuezhi <liaoxuezhi@baidu.com>
2021-01-04 16:59:32 +08:00

282 lines
6.2 KiB
Markdown
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Matrix 矩阵
description:
type: 0
group: null
menuName: Matrix
icon:
order: 30
---
矩阵类型的输入框。
## 基本用法
```schema:height="350" scope="body"
{
"type": "form",
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type": "matrix",
"name": "matrix",
"label": "Matrix",
"rowLabel": "行标题说明",
"columns": [
{
"label": "列1"
},
{
"label": "列2"
}
],
"rows": [
{
"label": "行1"
},
{
"label": "行2"
}
]
}
]
}
```
## 单选模式
配置`"multiple": false`可以设置单选,配置`singleSelectMode`可以设置单选模式
```schema:height="350" scope="body"
{
"type": "form",
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type": "matrix",
"name": "matrix",
"label": "Matrix",
"rowLabel": "行标题说明",
"multiple": false,
"columns": [
{
"label": "列1"
},
{
"label": "列2"
}
],
"rows": [
{
"label": "行1"
},
{
"label": "行2"
}
]
}
]
}
```
## 动态选项
可以配置 source 渲染动态选项
```schema:height="350" scope="body"
{
"type": "form",
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"name": "matrix",
"type": "matrix",
"label": "动态矩阵组件",
"source": "/api/mock2/options/matrix?waitSeconds=1"
}
]
}
```
以上面为例source 接口返回格式如下:
```json
{
"status": 0,
"msg": "ok",
"data": {
"columns": [
{
"label": "Col A",
"col": "a"
},
{
"label": "Col B",
"col": "b"
},
{
"label": "Col C",
"col": "c"
},
{
"label": "Col D",
"col": "d"
},
{
"label": "Col E",
"col": "e"
}
],
"rows": [
{
"label": "Row 1",
"rol": 1
},
{
"label": "Row 2",
"rol": 2
},
{
"label": "Row 3",
"rol": 3
},
{
"label": "Row 4",
"rol": 4
},
{
"label": "Row 5",
"rol": 5
},
{
"label": "Row 6",
"rol": 6
}
]
}
}
```
### column 模式
默认为 column 模式,即每列只能单选某个单元格
```schema:height="350" scope="body"
{
"type": "form",
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type": "matrix",
"name": "matrix",
"label": "Matrix",
"rowLabel": "行标题说明",
"multiple": false,
"columns": [
{
"label": "列1"
},
{
"label": "列2"
}
],
"rows": [
{
"label": "行1"
},
{
"label": "行2"
}
]
}
]
}
```
### cell 模式
cell 模式,指全部选项中只能单选某个单元格
```schema:height="350" scope="body"
{
"type": "form",
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type": "matrix",
"name": "matrix",
"label": "Matrix",
"rowLabel": "行标题说明",
"multiple": false,
"singleSelectMode": "cell",
"columns": [
{
"label": "列1"
},
{
"label": "列2"
}
],
"rows": [
{
"label": "行1"
},
{
"label": "行2"
}
]
}
]
}
```
### row 模式
row 模式,每行只能单选某个单元格
```schema:height="350" scope="body"
{
"type": "form",
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type": "matrix",
"name": "matrix",
"label": "Matrix",
"rowLabel": "行标题说明",
"multiple": false,
"singleSelectMode": "row",
"columns": [
{
"label": "列1"
},
{
"label": "列2"
}
],
"rows": [
{
"label": "行1"
},
{
"label": "行2"
}
]
}
]
}
```
## 属性表
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | ---------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| columns | `Array<column>` | | 列信息,数组中 `label` 字段是必须给出的 |
| rows | `Array<row>` | | 行信息, 数组中 `label` 字段是必须给出的 |
| rowLabel | `string` | | 行标题说明 |
| source | [API](../../types/api) | | Api 地址,如果选项组不固定,可以通过配置 `source` 动态拉取。 |
| multiple | `boolean` | `true` | 是否多选 |
| singleSelectMode | `string` | `"column"` | 设置单选模式,`multiple`为`false`时有效,可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格,每列只能单选某个单元格 |