0


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

service

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

最后

整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。



有需要的小伙伴,可以点击下方卡片领取,无偿分享


本文转载自: https://blog.csdn.net/qq_53225741/article/details/128502808
版权归原作者 前端码农小王 所有, 如有侵权,请联系我们删除。

“amis组件学习的配置介绍(二)”的评论:

还没有评论