common-ui/docs/components/complex-form/base.md

CommonComplexForm 复杂表单

基础用法

:::demo

<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进行动态组件的挂载，所以在使用时需要：

  import { ref, shallowRef } from 'vue';
  import *** from './***.vue';
  const dom = shallowRef({ demo: *** });

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

如此即可达成动态组件挂载的效果。

---

动态slot示例：

:::demo

<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

事件