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

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