本文主要是介绍amis中 InputTable Combo InputKV/InputKVS 区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
InputTable 与 Combo
input-table 内无法配置formula对每列做复杂逻辑
Combo 可以配置formula对每列数据做复杂逻辑处理 combo中每个选项配置弹窗,可以添加此属性,合并数据 "mergeData": true
Combo 与 InputKVS / InputKV
combo 多选模式数组[ {}, {} ] Combo 单选模式时对象 { "text":"1", "select":"a" }
InputKV 是对象 { key : value} inputKVS 类似InputKV也是对象 { key : { kvs } }, 区别在于InputKV value只能是单组件。而InputKVS value可以是多组件组合。尽量用InputKVS
input-kv 可以自定义输入key的name（底层实现也是基于combo 二者配置可共用）. combo 不可自定义.
InputKVS的valueItems内直接通过组件name进行操作即可,无需加前缀name
{
"type": "input-kvs",
"name": "field",
"addButtonText": "新增字段",
"keyItem": {
"label": "字段名",
"name": "_key" //用户输入作为name
},
"valueItems": [{
"type": "input-kvs",
"addButtonText": "新增字段",
"name": "_value", // 直接将keyItem作为value的key,不再嵌套一层name了, 要生效此valueItems内只能放input-kvs一个组件, 否则就是将_value作为name了,而不是输入值作为name
"keyItem": {
"label": "字段名",
"name": "_key"
},
"valueItems": [{
"type": "switch",
"name": "primary",
"label": "是否是主键"
}]
}
// {
// "type": "switch",
// "name": "primary",
// "label": "是否是主键"
// },
// {
// "type": "formula",
// "name": "test",
// // "formula": "${primary ? '对' : '错'}" //${}表达式语法,只能放一个表达式. 表达式内逻辑运算 valueItems内直接用组件name,不加前缀!!!!!
// "formula": "primary ? '对' : '错'" //js代码
// }
]
}
Combo的items内直接通过组件name进行操作即可,无需加前缀name。 默认 Combo 数据域中，每一项会有一个隐藏变量index 。
Combo内元素是单个时，可以使用flat": true 打平，提取值到数组中。[aa, bb]
默认情况下，Combo 内表达项无法获取父级数据域的数据. 默认items内组件是封闭再自己的空间内,互相调用的.
默认不会映射父级数据，可以配置"canAccessSuperData": true开启此特性，配置了该配置项后，添加 Combo 的input-text表单项会自动映射父级数据域的同名变量。但是为了效率，在父级数据域变化的时候，默认 combo 内部是不会进行同步的
我们在 combo 上配置"strictMode": false和"syncFields": ["super_text"]，即可实现同步 . syncFields会导致combo数据域结构中多出一个syncFields配置的字段，尽量避免使用syncField!!!!!
Combo组件嵌套使用时,若加了asyncFields修改同步有时不生效,可能是asyncFields嵌套使用的问题,去掉最外层不影响父级数据映射的asyncFields即可fix.
Combo设置默认值：
1.直接配置combo的value属性： "value": { "refX": "1" }
2.配置父级的data属性，然后开启combo的canAccessSuperData，注入默认值： "data": { "refX": "1" }
{
"type": "select",
"name": "position.name",
"label": "连接桩布局",
"source": {
"method": "get",
"url": "/lbserver/api/DictionaryInfo/findOptions?filter[where][dictionaryModel]=ProcessDesign&filter[where][dictionaryModelID]=Common.PortLayoutTpl",
"cache": 10000
}
},
{
"type": "combo",
"name": "position.args",
"canAccessSuperData": true,
"strictMode": false,
"syncFields": [
"position"
],
"items": [
{
"type": "service",
"schemaApi": {
"method": "post",
"url": "/lbserver/api/DictionaryInfo/ProcessDesign/Common.PortLayoutTpl/formByName/${position.name}", //同步变化
"sendOn": "this.comType"
}
}
],
}
Combo将弹窗中数据回传到items对应的form表单中:(动作setValue+index结合实现)
需要给 combo 设置个 id 属性，用来给事件动作指定目标用。
弹窗按钮配置了数据映射 {comboIndex: "${index}"} 因为 crud 的行数据上也有 index 变量，派送动作时获取 index 变量是 crud 所在行的序号。所以弹出弹窗的时候，先把 combo 的序号赋值给 comboIndex
crud 操作栏里面添加了个按钮，close: true 设置是让动作完成后关闭弹窗。
按钮里面添加了 onEvent 配置，click 时做 setValue 动作，并设置参数 index 为 '${comboIndex}' 值为 ${&}。其中 ${&} 是特殊语法，用来取整个上下数据。
"actions": [
{
"componentId": "thecombo",
"actionType": "setValue",
"args": {
"index": "${comboIndex}",
"value": "${&}"
}
}
]
这篇关于amis中 InputTable Combo InputKV/InputKVS 区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
