<template>
  <div>
    <!--
      form 总共包含 单选框 多选框 输入框 选择器 日期时间选择器
      formDate: {
        formModel: {}, // 表单数据对象
        rules: {}, // 	表单验证规则
        inline: false, // boolean	行内表单模式
        labelPosition:‘‘, // right/left/top 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
        formContent: [
          {
            formItemLabel: ‘‘, // 标签
            formType: ‘text‘, // 判断类型
            Model: ‘‘, // 绑定值
            inputPlaceholder: ‘‘, // 提示语
            readonly: false, // boolean 只读
          },
          {
            formItemLabel: ‘‘, // 标签
            formType: ‘select‘,
            Model: ‘‘,
            selectPlaceholder: ‘‘,
            checkType: ‘‘, // 当需要change方法时 用来做使用方法判断的
            options: [
              {
                value: ‘我是隐藏的和获取的值‘,
                label: ‘我是显示的值‘
              }
            ] // 选项的值
          },
          {
            formItemLabel: ‘‘, // 标签
            formType: ‘radio‘, // radioButton 按钮形式  radio 普通形式
            Model: ‘‘,
            size: ‘‘, // medium / small / mini	*Radio 的尺寸，仅在 border 为真时有效
            radio: [{
              label: ‘‘, // 标题
              disabled: false, // 禁用
              border: false // 边框 radio
            }]
          },
          {
            formItemLabel: ‘‘, // 标签
            formType: ‘checkbox‘,
            Model: ‘‘,
            size: ‘‘, // medium / small / mini	*多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效
            checkbox: [{
              label: ‘‘, // 标题
              disabled: false, // 禁用
              border: false // 边框 radio
            }]
          },
          {
            formItemLabel: ‘‘, // 标签
            formType: ‘dateTimeDicker‘,
            Model: ‘‘,
            type: ‘‘, // year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange
            dateTimeDickerPlaceholder: ‘‘,
            format: ‘‘, // 格式
            valueFormat: ‘‘ // 格式
          }
        ],
      }
     -->
    <el-form
      :model="formDate.formModel"
      :rules="formDate.rules"
      :inline="formDate.inline"
      :label-position="formDate.labelPosition"
      label-width="auto"
    >
      <slot name="formTop" />
      <el-form-item
        v-for="(item, key) in formDate.formContent"
        :key="key"
        :label="item.formItemLabel"
        :prop="item.Model"
      >
        <!-- 输入框 -->
        <el-input
          v-if="item.formType == ‘text‘ || item.formType == ‘textarea‘"
          v-model="formDate.formModel[item.Model]"
          :type="item.formType"
          :placeholder="item.inputPlaceholder"
          :readonly="item.readonly"
        />
        <!-- 选择器 -->
        <el-select
          v-if="item.formType == ‘select‘"
          v-model="formDate.formModel[item.Model]"
          :placeholder="item.selectPlaceholder"
          clearable
          filterable
          @change="selectChange(item.checkType)"
        >
          <el-option
            v-for="i in item.options"
            :key="i.value"
            :label="i.label"
            :value="i.value"
          />
        </el-select>
        <!-- 单选框 -->
        <el-radio-group
          v-if="item.formType == ‘radio‘ || item.formType == ‘radioButton‘"
          v-model="formDate.formModel[item.Model]"
          :size="item.size"
        >
          <!-- 普通单选框 -->
          <template
            v-if="item.formType == ‘radio‘"
          >
            <el-radio
              v-for="(radio, key1) in item.radio"
              :key="key1"
              :label="radio.label"
              :border="radio.border"
              :disabled="radio.disabled"
            />
          </template>
          <!-- 按钮形式的单选框 -->
          <template
            v-if="item.formType == ‘radioButton‘"
          >
            <el-radio-button
              v-for="(radio, key1) in item.radio"
              :key="key1"
              :label="radio.label"
              :disabled="radio.disabled"
            />
          </template>
        </el-radio-group>
        <!-- 复选框 -->
        <el-checkbox-group
          v-model="formDate.formModel[item.Model]"
          :size="item.size"
        >
          <el-checkbox
            v-for="(checkbox, key2) in item.checkbox"
            :key="key2"
            :label="checkbox.label"
            :border="checkbox.border"
            :disabled="checkbox.disabled"
            :name="item.Model"
          >
            {{ checkbox.label }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 日期时间选择器 -->
        <el-date-picker
          v-if="item.formType == ‘dateTimeDicker‘"
          v-model="formDate.formModel[item.Model]"
          :type="item.type"
          :placeholder="item.dateTimeDickerPlaceholder"
          :format="item.format"
          :value-format="item.valueFormat"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    formDate: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    selectChange(checkType) {
      console.log(checkType)
      if (checkType === undefined) {
        // console.log(‘und‘)
      } else {
        console.log(‘父组件方法‘)
        this.$emit(‘selectChange‘, checkType)
      }
    }
  }
}
</script>

element form 二次封装