vue + element UI 实现动态表单并添加验证

<template>

    <el-form

        ref="temFormRef"

        label-width="120px"

        v-if="type === 'edit'"

        :model="ruleForm"

    >

        <div class="moreRulesIn" v-for="(item, i) in ruleForm.cloneCustomList" :key="item.TemplateID">

            <el-form-item :label="item.FileName + ':'" :prop="'cloneCustomList.' + i +'.DefaultValue'"  :rules="{ required: item.IsRequired === 1, message: item.Tip, trigger: ['blur', 'change'] }">

                <el-input v-if="item.FieldType === 1" v-model="item.DefaultValue" :placeholder="item.Tip"></el-input>

                <el-input-number v-if="item.FieldType === 2" v-model="item.DefaultValue" />

                <el-select v-if="item.FieldType === 3" v-model="item.DefaultValue" class="m-2" :placeholder="item.Tip" size="large">

                    <el-option

                        v-for="ops in item.Options"

                        :key="ops.OptionID"

                        :label="ops.OptionValue"

                        :value="ops.OptionID"

                    />

                </el-select>

                <el-radio-group v-if="item.FieldType === 4" v-model="item.DefaultValue">

                    <el-radio v-for="ops in item.Options" :label="ops.OptionID" :key="ops.OptionID">{{ops.OptionValue}}</el-radio>

                </el-radio-group>

                <el-checkbox-group v-if="item.FieldType === 5" v-model="item.DefaultValue">

                    <el-checkbox v-for="ops in item.Options" :key="ops.OptionID" :label="ops.OptionID">{{ ops.OptionValue }}</el-checkbox>

                </el-checkbox-group>

                <el-date-picker

                    v-if="item.FieldType === 6"

                    v-model="item.DefaultValue"

                    type="date"

                    :placeholder="item.Tip"

                    value-format="YYYY-MM-DD"

                />

                <el-time-picker v-if="item.FieldType === 7" v-model="item.DefaultValue" value-format="HH:mm:ss" :placeholder="item.Tip" />

            </el-form-item>

        </div>

    </el-form>

    <el-form v-else>

        <el-form-item v-for="(item, index) in cloneCustomList" :key="index" :label="item.FileName + ':'">

            <div>

                <span v-if="item.FieldType === 1">{{getVal(item.TemplateID)}}</span>

                <span v-if="item.FieldType === 2">{{getVal(item.TemplateID)}}</span>

                <span v-if="item.FieldType === 3">{{getOption(item.Options, item.TemplateID)}}</span>

                <span v-if="item.FieldType === 4">{{getOption(item.Options, item.TemplateID)}}</span>

                <span v-if="item.FieldType === 5">{{getCheckbox(item.Options, item.TemplateID)}}</span>

                <span v-if="item.FieldType === 6">{{getVal(item.TemplateID)}}</span>

                <span v-if="item.FieldType === 7">{{getVal(item.TemplateID)}}</span>

            </div>

        </el-form-item>

    </el-form>

</template>

<script lang="ts" setup>

import { ref, reactive, toRefs, PropType, watch, onMounted } from 'vue';

import {  ITemplate } from "@/types/activitySet";

const props = defineProps({

    customList: {

        type: Array as PropType<ITemplate[]> ,

        defalut:() => []

    },

    type: {

        type: String,

        default: 'view'

    },

    tems: {

        type: Array,

        default: () => []

    }

})

const temFormRef = ref();

const isvalid = ref(false);

const { tems, type} = toRefs(props)

const ruleForm = reactive({

        cloneCustomList:[] as ITemplate[]

})

const { cloneCustomList } = toRefs(ruleForm)

 

const formEl = () => {

    isvalid.value = false;

    temFormRef.value!.validate((valid: any) => {

        if (valid) {

            isvalid.value = true;

        }

    })

}

const getVal = (id:string) => {

    let val:any = ''

    val = tems.value.find((item:any) => {

        return item.TemplateID === id

    })

    return val.FileValue

}

const getOption = (option:any,id:string) => {

    let val:any = ''

    let Te:any = tems.value.find((item:any) => {

        return item.TemplateID === id

    })

    val = option.find((op:any) => {

        return op.OptionID === Te.FileValue

    })

    return val.OptionValue

}

const getCheckbox = (option:any,id:string) => {

    let val:any = []

    let Te:any = tems.value.find((item:any) => {

        return item.TemplateID === id

    })

    option.map((op:any) => {

        if(Te.FileValue.split(',').includes(op.OptionID)){

            val.push(op.OptionValue)

        }

    })

    return val.join(',')

}

onMounted(() => {

    if(props.type === 'view') {

        ruleForm.cloneCustomList = JSON.parse(JSON.stringify(props.customList))

        ruleForm.cloneCustomList.forEach((item:any) => {

            switch(item.FieldType) {

                case 3:

                    item.DefaultValue = item.Options.find((item:any) => {

                        return item.DefaultType === 1

                    })?.OptionID;

                    break;

                case 4:

                    item.DefaultValue = item.Options.find((item:any) => {

                        return item.DefaultType === 1

                    })?.OptionID;

                    break;

                case 5:

                    item.DefaultValue = item.Options.map((item:any) => {

                        if(item.DefaultType === 1){

                           return item?.OptionID

                        }

                    }).filter(Boolean);

                    break;

            }

        })

    }

})

watch(() => props.customList, (newVal, OldVal) => {

    if(newVal) {

        ruleForm.cloneCustomList = JSON.parse(JSON.stringify(newVal))

        ruleForm.cloneCustomList.forEach((item:any) => {

            switch(item.FieldType) {

                case 3:

                    item.DefaultValue = item.Options.find((item:any) => {

                        return item.DefaultType === 1

                    })?.OptionID;

                    break;

                case 4:

                    item.DefaultValue = item.Options.find((item:any) => {

                        return item.DefaultType === 1

                    })?.OptionID;

                    break;

                case 5:

                    item.DefaultValue = item.Options.map((item:any) => {

                        if(item.DefaultType === 1){

                           return item?.OptionID

                        }

                    }).filter(Boolean);

                    break;

            }

        })

        console.log(ruleForm.cloneCustomList,'cloneCustomList')

    }

},{

    deep:true

})

defineExpose({

    formEl,

    isvalid,

    cloneCustomList

})

</script>