# 多类型表单
> multi-type-form

<img alt="多类型表单示例" src="../images/comprehensiveQueryConfigUI.png" width="70%">

## 何时使用

此组件适用于多种类型的表单项展示。

## 1、组件引用示例

``` javascript
<template>
  <multi-type-form
    :layout="layout"
    :labelCol="labelCol"
    :wrapperCol="wrapperCol"
    :DataModel="DataModel"
    :DataSource="widgetConfig"
  />
</template>
```

## 2、参数说明

|参数|说明|是否必填|类型|默认值|
|:---|:---|:---|:---|:---|
|layout|表单布局|可选项|'horizontal'|'vertical'|'inline'|'horizontal'	|
|labelCol|label 标签布局，设置`span` `offset`值，如`{span: 3, offset: 12}`或`sm: {span: 3, offset: 12}`|可选项|对象||
|wrapperCol|需要为输入控件设置布局样式时，使用该属性，用法同 labelCol|可选项|对象||
|DataModel|数据模板，涉及表单标签的展现形式；详见下方说明|可选项|数组||
|DataSource|表单数据|可选项|数组||

## 3、数据模板说明

|字段名|说明|适用类别|
|:---|:---|:---|
|name|对应表单数据的字段|所有类别|
|label|对应界面展示的表单项|所有类别|
|paramType|表单项类别，支持枚举型（ENUM）、数字型（NUMBER）、字符型（STRING）、布尔型（BOOLEAN）|-|
|enums|枚举项，用逗号隔开，例：'normal, result, cluster'|枚举型（ENUM）|
|selectLabel|枚举项的界面展示，用逗号隔开，例：'面板展示, 结果集展示, 聚合展示'|枚举型（ENUM）|
|disabled|枚举项中禁用项展示，数组类型，例：['result']|枚举型（ENUM）|

## 4、示例代码

``` vue
<template>
  <div>
    <multi-type-form
      :layout="layout"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      :DataModel="DataModel"
      :DataSource="widgetConfig"
    />
  </div>
</template>

<script>
const DataModel = [
  {
    name: 'ip',
    label: '服务IP',
    paramType: 'STRING', // 目前支持ENUM、NUMBER、STRING、BOOLEAN
  },
  {
    name: 'port',
    label: '端口',
    paramType: 'STRING',
  },
  {
    name: 'combine',
    label: '采用向前指针',
    paramType: 'BOOLEAN',
  },
  {
    name: 'queryWay',
    label: '查询方式',
    paramType: 'ENUM',
    enums: 'gdbp, doc',
    disabled: ['doc']
  },
  {
    name: 'showType',
    label: '查询结果方式',
    paramType: 'ENUM',
    enums: 'normal, result, cluster',
    selectLabel:'面板展示, 结果集展示, 聚合展示'
  },
  {
    name: 'clusterMaxCount',
    label: '最大聚合数',
    paramType: 'NUMBER',
  },
]
export default {
  name: 'ComprehensiveQuerySetting',
  data() {
    return {
      layout: 'horizontal',
      labelCol: { span: 3 },
      wrapperCol: { span: 21 },
      DataModel,
    };
  },
  props: {
    widgetConfig: Object
  }
  methods: {},
};
</script>
```
