element封装表单组件

        在实际开发中我们需求有大量的表单，这里我们可以考虑封装一个公共组件可以大大削减自己代码量

组件的实现

        下面是我自己实际开发中自己针对需求使用element-ui二次封装的一个表单组件，使用动态循环渲染

<template>
    <div >
        <el-form ref="form" :rules="rules" :model="formData" :label-width="labelWidth" style="display: flex; flex-wrap: wrap; ">
            <el-form-item v-for="(item, index) in formLabels" :key="index" :label="item.title" :prop="item.label" :style="`padding: 0 10px;width: calc(100% / ${column});`">
                <!-- 下拉框 -->
                <el-select v-if="item.type == 'options'" v-model="formData[item.label]" placeholder="请选择">
                    <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
                <!-- 时间选择器 -->
                <el-date-picker
                size="mini"
                  v-else-if="item.type == 'datePicker'"
                  v-model="formData[item.label]"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
                <!-- 输入框 -->
                <el-input v-else v-model="formData[item.label]"></el-input>
            </el-form-item>
            <el-form-item style="flex: 1; display: flex; justify-content: end;">
              <slot></slot>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        formLabels: {
          // 表格格式列表
          type: Array,
          default: () => {
              return [];
          }
        },
        formData: {
          // 表格数据
          type: Object,
          default: () => {
              return {};
          }
        },
        labelWidth: { // 标题的宽度
          type: String,
          default: '140px'
        },
        rules: {
          type: Object,
          default: () => {
            return {}
          }
        },
        column: {
          // 一行多少
          type: Number,
          default: 3
        }
    },
    methods: {
    }
};
</script>

<style lang="less" scoped>
div /deep/ .el-select{
  width: 100%;
}
div /deep/ .el-date-editor{
  width: 100%;
}
</style>

        

        我们通过formLabels设置要渲染的表单项根据不同的type来判断是输入框，时间选择器，下拉 框，formData 根据 formLabels中每一项label自动生成表单数据，这里使用插槽来设置对应的提交按钮

下面是父组件的需要填进来数据

  <From :formData="fromData" :rules="formRules" :formLabels="formLabels">
    <el-button type="primary" size="small" @click="submit">保存</el-button>
  </From>

// 表单数据
formLabels: [ //表单格式
   { title: '名字', label: 'name' },
   { title: '性别', label: 'sex', type: 'options', options: [ { value: 1, label: '男' }, { value: 2, label: '女' } ] },
   { title: '出生日期', label: 'birth', type: 'datePicker'}
   { title: '家庭住址地址', label: 'address' },
],
formRules: {
   name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
   ],
   sex: [
    { required: true, message: '请选择性别', trigger: 'blur' }
   ],
},
fromData: { // 表单数据
  sex: 1,
}

这里是一个基本表单组件，后续还有很多地方需要修改添加，