# CommonComplexForm 复杂表单


### 基础用法
:::demo
```vue
<template>
  <common-complex-form
    :complex-forms="complexForms"
    :form-values="formValues"
  >
  </common-complex-form>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
// 复杂表单
const complexForms = ref<any>([
  {
    label: '名称',
    name: 'name',
    type: 'input',
    attrs: {
      placeholder: '请输入名称'
    }
  },
  {
    label: '标识符',
    name: 'log',
    type: 'input',
    attrs: {
      placeholder: '请输入标识符'
    }
  },
  {
    label: '数据类型',
    name: 'dataType',
    type: 'select',
    attrs: {
      placeholder: '请选择数据类型',
      clearable: true,
      options: [
        { label: '文本', value: 'text' },
        { label: '数字', value: 'number' },
        { label: '日期', value: 'date' },
        { label: '枚举', value: 'enum' }
      ]
    },
    childForms: {
      text: [{ label: '读写类型', name: 'type', type: 'radio' }],
      number: [
        { label: '精度', name: 'jingdu', type: 'input' },
        { label: '单位', name: 'unit', type: 'select' },
        { label: '读写类型', name: 'type', type: 'radio' }
      ],
      date: [
        { label: '时间格式', name: 'dateformate', type: 'input' },
        { label: '读写类型', name: 'type', type: 'radio' }
      ],
      enum: [{ label: '读写类型', name: 'type', type: 'radio-group' }]
    }
  },
  {
    label: '数据长度',
    name: 'data',
    type: 'input',
    attrs: {
      placeholder: '请输入数据长度'
    }
  },

  {
    label: 'slotName',
    name: 'slotName',
    type: 'slot',
    slotName: 'slotName'
  },
  {
    label: 'slotAge',
    name: 'slotAge',
    type: 'slot',
    slotName: 'slotAge'
  }
]);

const formValues = ref<any>({
  name: '',
  log: '',
  dataType: '',
  type: '',
  jingdu: '',
  unit: '',
  dateformate: '',
  data: ''
});
</script>
```

:::


### 高级用法
  #### 使用插槽的方式接入自定义的一些非标准化的输入组件
  使用方法：此组件使用动态插槽透传的方式进行封装，支持通过对象中的数据类型type=slot，并传递动态的slotName的方式动态绑定slot，然后插入自己想要插入的元素或者组件，从而达成表单元素全灵活的方式。

  #### 使用动态组件的方式，自定义非标准话的输入组件
  使用方法： 此组件使用的是动态组件动态渲染的方式，通过type=component进行判断，通过componentId传入动态组件的名称，从而达成动态组件传入已封装好的组件中组合渲染，达成复杂表达开发的效果，不过由于vue3对于动态组件渲染时需要采用shallowRef进行动态组件的挂载，所以在使用时需要：
  ```js
  import { ref, shallowRef } from 'vue';
  import *** from './***.vue';
  const dom = shallowRef({ demo: *** });

  {
    label: 'commont测试',
    name: 'data',
    type: 'component',
    componentId: dom.value.demo
  }

  ```
  如此即可达成动态组件挂载的效果。
******
##### 动态slot示例：
:::demo 

```vue
<template>
  <div class="complex-form-demo">
    <common-complex-form
      :complex-forms="complexForms"
      :form-values="formValues"
    >
      <template #slotName>
        <el-input v-model="formValues.slotName"></el-input>
      </template>
      <template #slotAge>
        <el-input v-model="formValues.slotAge"></el-input>
      </template>
    </common-complex-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';


// 复杂表单
const complexForms = ref<any>([
  {
    label: '名称',
    name: 'name',
    type: 'input',
    attrs: {
      placeholder: '请输入名称'
    }
  },
  {
    label: '标识符',
    name: 'log',
    type: 'input',
    attrs: {
      placeholder: '请输入标识符'
    }
  },
  {
    label: '数据类型',
    name: 'dataType',
    type: 'select',
    attrs: {
      placeholder: '请选择数据类型',
      clearable: true,
      options: [
        { label: '文本', value: 'text' },
        { label: '数字', value: 'number' },
        { label: '日期', value: 'date' },
        { label: '枚举', value: 'enum' }
      ]
    },
    childForms: {
      text: [{ label: '读写类型', name: 'type', type: 'radio' }],
      number: [
        { label: '精度', name: 'jingdu', type: 'input' },
        { label: '单位', name: 'unit', type: 'select' },
        { label: '读写类型', name: 'type', type: 'radio' }
      ],
      date: [
        { label: '时间格式', name: 'dateformate', type: 'input' },
        { label: '读写类型', name: 'type', type: 'radio' }
      ],
      enum: [{ label: '读写类型', name: 'type', type: 'radio-group' }]
    }
  },
  {
    label: '数据长度',
    name: 'data',
    type: 'input',
    attrs: {
      placeholder: '请输入数据长度'
    }
  },
  {
    label: 'slotName',
    name: 'slotName',
    type: 'slot',
    slotName: 'slotName'
  },
  {
    label: 'slotAge',
    name: 'slotAge',
    type: 'slot',
    slotName: 'slotAge'
  }
]);

const formValues = ref<any>({
  name: '',
  log: '',
  dataType: '',
  type: '',
  jingdu: '',
  unit: '',
  dateformate: '',
  data: ''
});
</script>


```

:::


### 配置参数

| 参数      | 说明        | 类型    | 是否必须 |
| :------- | :------------ | :------- | :------- |
| complexForms | 复杂表单表单元素列表 | Array[Object]，其中卡片内部字段| true |
| ---- label  | 表单元素中文显示 | String | true |
| ---- value  | 表单元素v-model绑定值 | String Array, Boolean | true |
| ---- type   | 目前暂时支持的表单元素类型有： input/textarea/select/input-num/radio/cascader/switch/checkbox/check-group/date-picker | String | true |
| ---- attrs  | 表单元素v-bind属性，支持原本element-plus中表单元素属性，另外对部分表单元素进行封装，支持自定义属性传递。下面有单独对自定义封装表单元素进行讲解 | Obkect | false |
|  childForms |  联动表单元素对象  |  Object  |  false  |
|form-values| form表单对应forms的对象，以key，value形式 |Object[]|true|



### 事件