amis2/docs-old/renderers/Form/Combo.md
2020-07-28 10:03:53 +08:00

7.5 KiB
Raw Blame History

Combo

组合模式支持自由组合多个表单项。当设置成单选时数据格式为对象当设置成多选时数据格式为数组数组成员是对象flat 模式可以直接是某个表单单项的数值)。

  • type 请设置成 combo
  • multiple 默认为 false 配置是否为多选模式
  • controls 配置组合成员,所有成员都是横向展示,可以是任意 FormItem
  • controls[x].columnClassName 列的类名,可以用它配置列宽度。默认平均分配。
  • controls[x].unique 设置当前列值是否唯一,即不允许重复选择。
  • maxLength 当 multiple 为 true 的时候启用,设置可以最大项数。
  • flat 默认为 false, 是否将结果扁平化(去掉 name),只有当 controls 的 length 为 1 且 multiple 为 true 的时候才有效。
  • joinValues 默认为 true 当扁平化开启的时候,是否用分隔符的形式发送给后端,否则采用 array 的方式。
  • delimiter 当扁平化开启并且 joinValues 为 true 时,用什么分隔符。
  • multiLine 默认是横着展示一排,设置以后竖着展示
  • addable 是否可新增。
  • removable 是否可删除
  • itemRemovableOn 判断单条是否可删除,类型为表达式
  • deleteApi 如果配置了,则删除前会发送一个 api请求成功才完成删除
  • deleteConfirmText 默认为 确认要删除?,当配置 deleteApi 才生效!删除时用来做用户确认!
  • draggable 默认为 false, 是否可以拖动排序, 需要注意的是当启用拖动排序的时候,会多一个$id 字段
  • draggableTip 可拖拽的提示文字,默认为:"可通过拖动每行中的【交换】按钮进行顺序调整"
  • addButtonText 新增按钮文字,默认为 "新增"
  • minLength 限制最小长度。
  • maxLength 限制最大长度。
  • scaffold 单组表单项初始值。默认为 {}
  • canAccessSuperData 指定是否可以自动获取上层的数据并映射到表单项上,默认是false
  • conditions 数组的形式包含所有条件的渲染类型,单个数组内的test 为判断条件,数组内的controls为符合该条件后渲染的schema
  • typeSwitchable 是否可切换条件,配合conditions使用
  • formClassName 单组表单项的类名
  • noBorder 单组表单项是否有边框
  • strictMode 默认为严格模式,设置为 false 时,当其他表单项更新是,里面的表单项也可以及时获取,否则不会。
  • syncFields 配置同步字段。只有 strictMode 为 false 时有效。如果 combo 层级比较深,底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式:["os"]
  • 还有更多通用配置请参考 FormItem

单行模式

[
{
  "type": "combo",
  "name": "combo",
  "label": "单选组合项",
  "controls": [
    {
      "name": "a",
      "type": "text"
    },
    {
      "name": "b",
      "type": "select",
      "options": ["a", "b", "c"]
    }
  ]
},
{
  "type": "static",
  "name": "combo",
  "label": "当前值"
},

{
  "type": "combo",
  "name": "combo2",
  "label": "多选组合项",
  "multiple": true,
  "draggable": true,
  "controls": [
    {
      "label": "字段1",
      "name": "a",
      "type": "text"
    },
    {
      "label": "字段2",
      "name": "b",
      "type": "select",
      "options": ["a", "b", "c"],
      "unique": true
    }
  ]
},
{
  "type": "static",
  "name": "combo2",
  "label": "当前值"
}
]

多行模式。

[
{
  "type": "combo",
  "name": "combo",
  "label": "多选组合form",
  "multiple": true,
  "multiLine": true,
  "controls": [
      {
        "label": "字段1",
        "name": "a",
        "type": "text"
      },
      {
        "label": "字段2",
        "name": "b",
        "type": "select",
        "options": ["a", "b", "c"]
      }
    ]

},
{
  "type": "static",
  "name": "combo",
  "label": "当前值"
},

{
  "type": "combo",
  "name": "xxx",
  "label": "单选组合form",
  "multiLine": true,
  "controls": [
    {
      "name": "a",
      "type": "text"
    },
    {
      "name": "b",
      "type": "select",
      "options": ["a", "b", "c"]
    }
  ]
},
{
  "type": "static",
  "name": "xxx",
  "label": "当前值"
}

]

条件分支

默认 Combo 渲染的成员是固定表单项的,成员的类型时一致,如果不一致怎么办?这里可以设置条件分支来给不同的成员设置不同的表单项。

如下面的栗子,定义了两种类型:文本和数字,用户新增的时候可以选择是新增文本还是数字。区分是文字和数字的方式是根据成员数据中的 type 字段来决定。

{
  "type": "combo",
  "name": "combo-conditions2",
  "label": "多选",
  "value": [
    {
      "type": "text"
    }
  ],
  "multiLine": true,
  "multiple": true,
  "typeSwitchable": false,
  "conditions": [
    {
      "label": "文本",
      "test": "this.type === \"text\"",
      "scaffold": {
        "type": "text",
        "label": "文本",
        "name": ""
      },
      "controls": [
        {
          "label": "名称",
          "name": "label",
          "type": "text"
        },
        {
          "label": "字段名",
          "name": "name",
          "type": "text"
        }
      ]
    },
    {
      "label": "数字",
      "test": "this.type === \"number\"",
      "scaffold": {
        "type": "number",
        "label": "数字",
        "name": ""
      },
      "controls": [
        {
          "label": "名称",
          "name": "label",
          "type": "text"
        },
        {
          "label": "字段名",
          "name": "name",
          "type": "text"
        },
        {
          "label": "最小值",
          "name": "min",
          "type": "number"
        },
        {
          "label": "最大值",
          "name": "max",
          "type": "number"
        },
        {
          "label": "步长",
          "name": "step",
          "type": "number"
        }
      ]
    }
  ]
}
  • conditions Array 数组,每个成员是一种类型
  • conditions[x].label 类型名称
  • conditions[x].test 表达式,目标成员数据是否属于这个类型?
  • conditions[x].scaffold 初始数据,当新增的时候直接使用此数据。
  • conditions[x].controls 该类型的表单设置。
  • typeSwitchable 类型是否允许切换,如果设置成 true 会多一个类型切换的按钮。

Tabs 模式

默认成员是一个一个排列的,如果数据比较多优点让人眼花缭乱。所以 Combo 支持了 tabs 的排列方式。

{
  "type": "combo",
  "name": "combo101",
  "label": "组合多条多行",
  "multiple": true,
  "multiLine": true,
  "value": [
    {}
  ],
  "tabsMode": true,
  "tabsStyle": "card",
  "maxLength": 3,
  "controls": [
    {
      "name": "a",
      "label": "文本",
      "type": "text",
      "placeholder": "文本",
      "value": "",
      "size": "full"
    },
    {
      "name": "b",
      "label": "选项",
      "type": "select",
      "options": [
        "a",
        "b",
        "c"
      ],
      "size": "full"
    }
  ]
}
  • tabsMode boolean 用来开启此模式
  • tabsStyle string 样式,可选:linecard 或者 radio.
  • tabsLabelTpl 用来生成标题的模板,默认为:成员 ${index|plus}

注意:这是新引入的功能,目前还不支持拖拽组合使用。且此模式只有多选时才能生效。