amis组件学习的配置介绍(二)开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动

书接上回。

table view 表格视图

这个看文档也很好理解，但是还是需要介绍一下。

trs： <Array>设置表格行属性。
tds: <Array>设置单元格属性。

      {
        "type": "table-view",
        // 设置表格行
        "trs": [
          {
            "background": "#F7F7F7",
            // 设置单元格
            "tds": [
              {
                "body": {
                  "type": "tpl",
                  "tpl": "地区"
                }
              }
            ]
          },
          {
            "tds": [
              {
                "rowspan": 2,
                "body": {
                  "type": "tpl",
                  "tpl": "华北"
                }
              }
            ]
          },
          {
            "tds": [
              {
                "body": {
                  "type": "tpl",
                  "tpl": "天津"
                }
              }
            ]
          }
        ]
      }

设置单元格样式,写在tds中的每个配置对象中

"style": {
  "borderBottomWidth": 0,
  "borderLeftWidth": 0,
  "color": "#f00"
}

列配置项,配置每列的合并和样式。

 "cols": [
   {},
   {
    span: 1,
    "style": {
      "background": "#F7F7F7"
    }
  }
],

其他的一些属性，用到的时候查看文档就行。

table 表格

当列超过 5 列后，就会在工具栏多渲染出来一个列展示与否的开关。我们可以通过配置columnsTogglable来表示要不要这个工具。

    "columnsTogglable": false

自动合并列

经过测试combineNum必须大于combineFromIndex才有效果。 所以combineNum并不是表示合并多少列阿。

// 表示自定合并多少列 只要多行的同一个属性值是一样的，就会自动合并。
"combineNum": 2,
// 表示从第二列开始自动合并
combineFromIndex: 2,

通过 itemActions 可以设置鼠标移动到行上出现操作按钮。

配置 itemAction 来实现点击某一行后进行操作。注意这个属性和 checkOnItemClick 冲突，因为都是定义行的点击行为，开启 itemAction 后 checkOnItemClick 将会失效。

配置当前行是否可选，不知道这个行为有啥用，选中后，没有给出任何事件和动作供我们获取选中的行数据。

    selectable: true,
    checkOnItemClick: true,

Textarea 多行文本输入框

resetValue该属性是配合clearable属性一起使用的，当清除文本框时，显示的值。

InputText 输入框

该组件功能非常强大，我们可以配置options属性来让其成为一个选择框。这个组件的当做选择输入框来使用时非常不错的，因为Options组件，搜索框在下拉框内，感觉不是很好看，这个就可以代替他了。

InputTag 标签选择器

options是配置输入框下拉选择的内容。

输入后直接失去焦点，就会生成一个tag。

批量输入，他表示一次输入多个tag，需要separator配置每个tag的分隔符。

source属性绑定的变量或者api需要返回一个数组。数组的每一项都需要包含label, value属性。

delimiter属性，表示tag输入或者选中时，每个选中的value值之间的分隔符。注意和separator属性做区分。separator属性表示批量输入时的分隔符。

InputTable 表格

这个组件非常好用，对于少量数据的的编辑和新增来说是真的不错。但是如果行属性过多的话，就不是很方便了。还是需要使用crud或者table组件来实现。

经过测试发现

    // 新增不能和needConfirm同时开启，不然有bug,不能新增
    "addable": true,
    "needConfirm": false,
    // 设置分页后，再点击新增他不能跳转到最后一页。
    "perPage": 1,

needConfirm属性表示可编辑状态是否是非确认模式，设置成false后就不是编辑状态了。即使设置了列类型和quickEdit属性。所以如果想让列表可以编辑，需要将needConfirm设置为false。

添加editable属性依旧是不可编辑的，只有配置"needConfirm": false时才可编辑。只有移除和复制生成一行不需要配置"needConfirm": false。

    
    "editable": true,
    // "needConfirm": false,

InputSubForm 子表单

这个组件就是点击按钮，弹出一个表单组件的会话框。

默认只能添加一个表单属性。如果想要添加多个需要配置multiple: true。并且addable也必须设置成true。

removable, addable 默认值都为true。

select 选择器（重点）

menuTpl：可以自定义下拉菜单的展示。可以写html语法。

分组展示,并设置多选。这个多选并不能做到控制哪个组单选还是多选。而是所有label的多选。如果可以设置每个分组的多选单选就很香了，可惜不支持。

    "multiple": true,
    "selectMode": "group",
    "options": [
      {
        "label": "法师",
        "children": [
          {
            "label": "诸葛亮",
            "value": "zhugeliang"
          }
        ]
      },
      {
        "label": "打野",
        "children": [
          {
            "label": "李白",
            "value": "libai"
          },
          {
            "label": "韩信",
            "value": "hanxin"
          }
        ]
      }
    ]

selectMode属性

chained：级联选择
group：分组选择
tree：树形选择
table: 表格选择。需要配置columns属性来设置。
associated：关联选择（这个可以设置左侧关联的模式"leftMode": "tree"）

动态数据格式，接口设计请参考这里

 // source 定义的api返回格式
 data: {
    options: [
        {
            // 左侧菜单
            leftOptions: [],
            // 关联的右侧菜单
            children: [],
            leftDefaultValue: ''
        }
    ]
 }

搜索动态数据，可以配置searchApi来传递term字段，搜索的值。然后返回options数据。

Radios 单选框

inline: false 可以让选择项竖向排列。并且可以设置columnsCount来指定一列排列几个。

    "inline": false,
    "columnsCount": 2

source可以直接取代options。

{
  "status": 0,
  "msg": "",
  "data": {
    "value": "b", // 可选，如果返回就会自动选中 b 选项
    // 必须用 options 作为选项组的 key 值
    "options": [
      {
        "label": "A",
        "value": "a"
      },
      {
        "label": "B",
        "value": "b"
      },
      {
        "label": "C",
        "value": "c"
      }
    ]
  }
}

Picker 列表选择器

通过配置options选项就是一个弹框列表选择器。

但是我们也可以通过配置pickerSchema属性来设置复杂的组件列表。

InputNumber 数字输入框

并没有做只能输入数字的限制。只是在失去焦点的时候删除非数字类型的内容。

设置小数点精度时，我们不能使用unitOptions属性。

"unitOptions": [
  "px",
  "%",
  "em"
]

NestedSelect 级联选择器

onlyLeaf属性表示只能选择叶子节点，父节点不能选择。

选中父节点默认子节点的值不会被携带到数据域中，需要配置"withChildren": true。并且可以设置"onlyChildren": true做到数据域中包含选中的子节点，不包含选中的父节点。

选中父节点默认会自动选中子节点，如果不想这样，那么我们就可以设置"cascade": true。

可以配置"searchable": true来做到搜索，可以替代input-text， select组件，因为他的搜索框在下拉框中。

ListSelect 列表

设置"clearable": true可以点击取消选择。

Input-Group 输入框组合（重点）

可以让其他组件和输入框input-text组合展示。这个组件在一定情况下特别好用。 就像使用在表单项的addOn属性的局限性，及如何替代

  {
    "type": "input-group",
    "name": "input-group",
    "label": "input 组合",
    "body": [
      {
        "type": "input-text",
        "placeholder": "搜索作业ID/名称",
        "inputClassName": "b-r-none p-r-none",
        "name": "input-group"
      },
      {
        "type": "submit",
        "label": "搜索",
        "level": "primary"
      }
    ]
  }

Group 表单项组 (重点)

表单项，默认都是一行显示一个，Group 组件用于在一行展示多个表单项，会自动根据表单项数量均分宽度。

可以直接给group组件设置"mode"来调整表单项label与组件的展示方式。

"mode": "horizontal",
"horizontal": {
  "left": 5,
  "right": 2
},

在表单项内部可以通过 columnRatio 来控制宽度，整体是 12 等分。

FieldSet 表单项集合

所以感觉这个组件用处不大。

但是如果不设置horizontal既可以解决这个问题，但是整体展示又不是很好看。

关于日期的组件

inputFormat: 选中后组件框的展示格式。
format: 表示表单项最后获取到值的格式。默认是一个时间戳。

Combo 组合

用于将多个表单项组合到一起，实现深层结构的数据编辑。

比如想提交 user.name 这样的数据结构，有两种方法：一种是将表单项的 name 设置为user.name，另一种就是使用 combo。

这个组件目前没有使用过，也没有合适的引用场景，用到的再去官网看。内容还是比较多的。

Checkboxes 复选框

这种选择框基本属性都差不多，radios，list-select。

目前只是使用它的展示功能，并不会去使用它的逻辑功能（增，删，改）

checkbox 勾选框

功能和switch一样。

当"optionType": "button"，"option": "" 可以设置勾选框中的文本内容。

    "optionType": "button",
    "option": ""

Button-Group-Select 按钮点选

不能删除选择的，只能切换。

"tiled": true, 这个属性只是表示将按钮增大了一些。

Options

看一些选择表单项的属性总结就行。

一些选择表单项的属性总结

"joinValues" 默认是通过,拼接选中的值。如果设置false，那么它将整个options-item作为值传入数组。

    {
      "select": [
        {
          "label": "Option A",
          "value": "a"
        },
        {
          "label": "Option B",
          "value": "b"
        }
      ]
    }

如果只想提取 value，需要加上 "extractValue": true。

    {
      "select": [
        "a",
        "b"
      ]
    }

"checkAll": true, 配置全选按钮。
delimiter: 设置多选时，分割值的分隔符。
autoComplete: 通过输入的内容请求匹配到的内容（模糊匹配）。支持的组件：Text、Select、Chained-Select、TreeSelect、Condition-Builder

service

schemaApi: 可以配置动态渲染页面内容。

amis组件学习的配置介绍(二)