amis/matrix.md at f769726bfb7b2223e1084fd9565335f4997d7630

test/amis

mirror of https://gitee.com/baidu/amis.git synced 2024-12-03 20:39:07 +08:00

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

6.2 KiB

Executable File

Raw Blame History

title	description	type	group	menuName	icon	order
Matrix 矩阵		0	null	Matrix		30

矩阵类型的输入框。

基本用法

{
  "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可以设置单选模式

{
  "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 渲染动态选项

{
  "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 接口返回格式如下：

{
  "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 模式，即每列只能单选某个单元格

{
  "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 模式，指全部选项中只能单选某个单元格

{
  "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 模式，每行只能单选某个单元格

{
  "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"
        }
      ]
    }
  ]
}

属性表

除了支持普通表单项属性表中的配置以外，还支持下面一些配置

属性名	类型	默认值	说明
columns	`Array<column>`		列信息，数组中 `label` 字段是必须给出的
rows	`Array<row>`		行信息，数组中 `label` 字段是必须给出的
rowLabel	`string`		行标题说明
source	API		Api 地址，如果选项组不固定，可以通过配置 `source` 动态拉取。
multiple	`boolean`	`true`	是否多选
singleSelectMode	`string`	`"column"`	设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格

6.2 KiB Executable File Raw Blame History Unescape Escape