ElementUI点击新增form表单

点击新增添加form表单并且要进行表单校验.

这里用到了表单校验 prop 的链式写法:

:prop="'familyInfo.'+index+'.realName'"
:prop="'familyInfo[0].realName'"

这两种都是可以的,因为prop接收的是一个字符串,经过源码处理都会转为 familyInfo.0.realName

具体实现代码:

<template>
    <div class="app-container">
        <div style="background-color: #FFFF">
            <el-form :model="familyForm" :rules="familyRules" ref="familyRef" label-width="120px">
                <div v-for="(item,index) in familyForm.familyInfo" :key="index">
                    <div class="title-div">
                        <div class="table-base-buttom">
                            <el-button type="primary" plain @click="addFamiy">新增
                            </el-button>
                            <el-button type="danger" @click="deleted(index)" v-show="index>0">删除</el-button>
                        </div>
                    </div>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="家属姓名" :prop="'familyInfo.'+index+'.realName'" :rules="familyRules.realName">
                                <el-input v-model="item.realName" placeholder="请输入家属姓名" clearable :style="{width: '100%'}">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="性别" :prop="'familyInfo.'+index+'.gender'" :rules="familyRules.gender">
                                <el-radio-group v-model="item.gender">
                                    <el-radio v-for="(item, index) in gender" :key="index" :label="item.value" :disabled="item.disabled">{
    
    {item.label}}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="家属联系电话" :prop="'familyInfo.'+index+'.tel'" :rules="familyRules.tel">
                                <el-input v-model="item.tel" placeholder="请输入家属联系电话" clearable :style="{width: '100%'}">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="家属身份证号" :prop="'familyInfo.'+index+'.idCard'" :rules="familyRules.idCard">
                                <el-input v-model="item.idCard" placeholder="请输入家属身份证号" clearable :style="{width: '100%'}">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="与老人关系" :prop="'familyInfo.'+index+'.relation'" :rules="familyRules.relation">
                                <el-select v-model="item.relation" placeholder="请选择与老人关系" clearable :style="{width: '100%'}">
                                    <el-option v-for="(item, index) in relationship" :key="index" :label="item.label" :value="item.value*1" :disabled="item.disabled"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="常住地址" :prop="'familyInfo.'+index+'.residentAddr'" :rules="familyRules.residentAddr">
                                <el-input v-model="item.residentAddr" placeholder="请输入常住地址" clearable :style="{width: '100%'}">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import {computed, ref, getCurrentInstance, reactive, toRefs} from "vue";

const { proxy } = getCurrentInstance();

const checkIdCard = (rule, value, callback) => {
    const regIdCard =
        /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    if (regIdCard.test(value)) {
        GetAge(value);
        return callback();
    }

    callback(new Error("请输入正确的身份证号"));
};

const data = reactive({
    familyForm: {
        familyInfo: [
            {
                realName: undefined,
                gender: undefined,
                idCard: undefined,
                tel: undefined,
                relation: undefined,
                residentAddr: undefined,
            },
        ]
    },
    familyRules: {
        realName: [
            {
                required: true,
                message: "请输入家属姓名",
                trigger: "blur",
            },
        ],
        gender: [
            {
                required: true,
                message: "请选择家属性别",
                trigger: "change",
            },
        ],

        idCard: [
            {
                required: true,
                message: "请输入家属身份证号",
                trigger: "blur",
            },
            { validator: checkIdCard, trigger: "blur" },
        ],
        tel: [
            {
                required: true,
                message: "请输入家属联系电话",
                trigger: "blur",
            },
        ],
        relation: [
            {
                required: true,
                message: "请选择与老人关系",
                trigger: "blur",
            },
        ],
        residentAddr: [
            {
                required: true,
                message: "请输入家属常住地址",
                trigger: "blur",
            },
        ],
    },
    gender:[
        {value:'男',label:'男',disabled:false},
        {value:'女',label:'女',disabled:false}
    ],
    relationship:[
        {value:'0',label:'父子',disabled:false},
        {value:'1',label:'母子',disabled:false},
        {value:'2',label:'父女',disabled:false},
        {value:'3',label:'母女',disabled:false},
    ]
})
const {familyForm,familyRules,gender,relationship} = toRefs(data)

// 新增
function addFamiy() {
    familyForm.value.familyInfo.push({
        realName: undefined,
        gender: undefined,
        idCard: undefined,
        tel: undefined,
        relation: undefined,
        residentAddr: undefined,
    });
}

// 删除
function deleted(index) {
    if (familyForm.value.familyInfo.length > 1) {
        familyForm.value.familyInfo.splice(index, 1);
    }
}

</script>

<style scoped>
</style>