amis2/docs/zh-CN/components/form/matrix-checkboxes.md
hsm-lv e6d2b2a035
fix:修复部分组件事件动作问题&补充组件动作表文档&规范事件动作参数类型 (#4152)
* fix:修复部分组件事件动作问题&补充组件动作表文档&规范事件动作参数类型

* fix:修复部分组件事件动作问题&补充组件动作表文档&规范事件动作参数类型

* fix:input-range类型声明问题

* fix:input-range单测问题

* fix:input-range单测u snapshot
2022-04-26 21:12:00 +08:00

7.0 KiB
Executable File
Raw Blame History

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

矩阵类型的输入框。

基本用法

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "debug": true,
  "body": [
    {
      "type": "matrix-checkboxes",
      "name": "matrix",
      "label": "Matrix",
      "rowLabel": "行标题说明",
      "columns": [
        {
          "label": "列1"
        },
        {
          "label": "列2"
        }
      ],
      "rows": [
        {
          "label": "行1"
        },
        {
          "label": "行2"
        }
      ]
    }
  ]
}

单选模式

配置"multiple": false可以设置单选,配置singleSelectMode可以设置单选模式

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "debug": true,
  "body": [
    {
      "type": "matrix-checkboxes",
      "name": "matrix",
      "label": "Matrix",
      "rowLabel": "行标题说明",
      "multiple": false,
      "columns": [
        {
          "label": "列1"
        },
        {
          "label": "列2"
        }
      ],
      "rows": [
        {
          "label": "行1"
        },
        {
          "label": "行2"
        }
      ]
    }
  ]
}

动态选项

可以配置 source 渲染动态选项

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
        "name": "matrix",
        "type": "matrix-checkboxes",
        "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": "/api/mock2/form/saveForm",
  "body": [
    {
      "type": "matrix-checkboxes",
      "name": "matrix",
      "label": "Matrix",
      "rowLabel": "行标题说明",
      "multiple": false,
      "columns": [
        {
          "label": "列1"
        },
        {
          "label": "列2"
        }
      ],
      "rows": [
        {
          "label": "行1"
        },
        {
          "label": "行2"
        }
      ]
    }
  ]
}

cell 模式

cell 模式,指全部选项中只能单选某个单元格

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
      "type": "matrix-checkboxes",
      "name": "matrix",
      "label": "Matrix",
      "rowLabel": "行标题说明",
      "multiple": false,
      "singleSelectMode": "cell",
      "columns": [
        {
          "label": "列1"
        },
        {
          "label": "列2"
        }
      ],
      "rows": [
        {
          "label": "行1"
        },
        {
          "label": "行2"
        }
      ]
    }
  ]
}

row 模式

row 模式,每行只能单选某个单元格

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
      "type": "matrix-checkboxes",
      "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" 设置单选模式,multiplefalse时有效,可设置为cell, row, column 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格,每列只能单选某个单元格

事件表

事件名称 事件参数 说明
change value: Array 选中值 选中值发生变化时触发

动作表

动作名称 动作配置 说明
clear - 清空
reset - 将值重置为resetValue,若没有配置resetValue,则清空
reload - 刷新(重新加载),只针对配置了source的点选按钮有效
setValue value: Array 更新的值 更新数据