基于element实现动态生成表单

<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <template v-for="it in setForm" >
                <el-form-item :label="it.label" v-if="it.type=='input'" :prop="it.char">
                    <el-input v-model="form[it.char]"></el-input>
                </el-form-item>
                <el-form-item :label="it.label" v-else-if="it.type=='textarea'" :prop="it.char">
                    <el-input v-model="form[it.char]" type="textarea" :rows="2"></el-input>
                </el-form-item>
                <el-form-item :label="it.label" v-else-if="it.type=='date'" :prop="it.char">
                    <el-date-picker
                            style="width: 100%"
                            v-model="form[it.char]"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="it.label" v-else-if="it.type=='datetime'" :prop="it.char">
                    <el-date-picker
                            style="width: 100%"
                            v-model="form[it.char]"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="it.label" v-else-if="it.type=='select'" :prop="it.char">
                    <el-select v-model="form[it.char]" placeholder="请选择" style="width: 100%">
                        <el-option
                                v-for="item in it.option"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>

<script>
    //配置生成表单
    export default {
        name: "detailEdite",
        data(){
            return{
                form:{
                    // char1:'',
                    // char2:11,
                    // char3:'2022-1-1',
                },
                //表单字段配置
                setForm:[
                    // { label:'编号',char:'char1',type:'input'},
                    // { label:'编号2',char:'char2',type:'textarea'},
                    // { label:'编号3',char:'char3',type:'date'},
                ],
                rules:{} //element效验规则
            }
        },
        methods:{
            save(){
                this.$emit('saveDetail',{form:this.form})
            },
            //行内效验
            checkEleForm(){
                let isGo = true
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        isGo =true
                    } else {
                        isGo = false
                    }
                });
                return isGo
            },
            //提示效验函数
            checkForm(){
                let isGo = true
                let str = ''
                if(Object.keys(this.rules).length > 0){
                    isGo = this.checkEleForm()
                    if(!isGo){
                        this.$message.warning('请完善信息')
                        return false
                    }
                }
                this.setForm.map(it=>{
                    if(it.require){
                      let val = this.form[it.char]
                      if(val===""){
                          isGo = false
                          str += it.label + ','
                      }
                    }
                })
                if(!isGo){
                    this.$message.warning(str+'不能为空')
                    return false
                }
                return true
            }
        }
    }
</script>

<style scoped>

</style>