vue + element-ui 动态添加行数据，并做校验

问题：最近在做一个vue项目时，遇到了一个动态添加行数据，并且添加校验的需求。

一开始，并不顺利，用了几种方法都么有效果，下面我来叙述下我的菜坑过程（本人助攻后端，但是前端缺人，只好去帮忙了，就当是锻炼自己的技术广度）

1、首先是form表单：

<el-form
    :model="form"
    :rules="ncidPositiveRules"
    ref="ncidPositiveForm"
>
    <Table :tableData="form.relativePersonNcidPositiveData">
        <el-table-column label="姓名" prop="xm" min-width="180">
            <template v-slot="scope">
                <el-form-item :prop="'relativePersonNcidPositiveData.' + scope.$index + '.xm'" :rules='ncidPositiveRules.xm'>
                    <el-input
                        v-model="scope.row.xm"
                        maxlength="100"
                        clearable
                        placeholder="请输入内容"
                    />
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column
            label="证件类型"
            prop="zjlx"
            min-width="110"
        >
            <template v-slot="scope">
                <el-form-item :prop="'relativePersonNcidPositiveData.' + scope.$index + '.zjlx'" :rules='ncidPositiveRules.zjlx'>
                    <el-select
                        v-model="scope.row.zjlx"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in zjlxData"
                            :key="item.bm"
                            :label="item.qc"
                            :value="item.bm"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column
            label="证件号"
            prop="zjhm"
            min-width="200"
        >
            <template v-slot="scope">
                <el-form-item  :prop="'relativePersonNcidPositiveData.' + scope.$index + '.zjhm'">
                    <el-input
                        v-model="scope.row.zjhm"
                        clearable
                        placeholder="请输入证件号码"
                    />
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column
            label="确诊日期"
            prop="qzrq"
            min-width="180"
        >
            <template v-slot="scope">
                <el-form-item>
                    <el-date-picker
                        v-model="scope.row.qzrq"
                        type="date"
                        style="width:150px;"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column
            label="出院日期"
            prop="cyrq"
            min-width="180"
        >
            <template v-slot="scope">
                <el-form-item>
                    <el-date-picker
                        v-model="scope.row.cyrq"
                        type="date"
                        style="width:150px;"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column
            label="死亡日期"
            prop="swrq"
            min-width="180"
        >
            <template v-slot="scope">
                <el-form-item>
                    <el-date-picker
                        v-model="scope.row.swrq"
                        type="date"
                        style="width:150px;"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column
            label="操作"
            prop="operation"
            min-width="100"
        >
            <template v-slot="scope">
                <el-form-item>
                    <div class="flex-in">
                        <div class="operation">
                            <span
                                @click="remove(scope.$index, 5)"
                                ><i class="el-icon-delete"></i>
                                删除
                            </span>
                        </div>
                    </div>
                </el-form-item>
            </template>
        </el-table-column>
    </Table>
</el-form>
<!-- 添加 -->
<div class="add">
   <span @click="add(5)">
         <i class="ez-icon-circle-plus-outline"></i>添加
   </span>
</div>

注意：此段代码的编写

<el-form
    :model="form"
    :rules="ncidPositiveRules"
    ref="ncidPositiveForm"
>
    <Table :tableData="form.relativePersonNcidPositiveData">
        <el-table-column label="姓名" prop="xm" min-width="180">
            <template v-slot="scope">
                <el-form-item :prop="'relativePersonNcidPositiveData.' + scope.$index + '.xm'" :rules='ncidPositiveRules.xm'>
                    <el-input
                        v-model="scope.row.xm"
                        maxlength="100"
                        clearable
                        placeholder="请输入内容"
                    />
                </el-form-item>
            </template>
        </el-table-column>

表单绑定的 form对象如下

// 一开始，我的数据数组，是放在外面的，自己定义了一个ncidPositiveForm，新增和修改可以，但是校验不行，始终有问题
form:{
    relativePersonNcidPositiveData: []
},

// 校验，其中的证件号码的校验，可以去搜，很多方法都可以
ncidPositiveRules: {
    xm: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    zjlx: [
        {
            required: true,
            message: '请选择证件类型',
            trigger: 'change'
        }
    ],
    zjhm: [
        {
            required: true,
            message: '请输入证件号码',
            trigger: 'change',
        },
        { validator: zjhmRules, trigger: 'change' },
    ],
},

特别注意这里的写法：

// 通过索引去获取
<el-form-item :prop="'relativePersonNcidPositiveData.' + scope.$index + '.xm'" :rules='ncidPositiveRules.xm'>

2、添加操作

add(num) {      
    let ncidPositiveForm = {
        xm: '', 
        zjlx: '', 
        zjhm: '', 
        qzrq: '', 
        cyrq: '', 
        swrq: '', 
    };
    if(this.form.relativePersonNcidPositiveData == undefined) {
        this.form.relativePersonNcidPositiveData = new Array();
    }
    this.form.relativePersonNcidPositiveData.push(ncidPositiveForm);
},

注意：添加时，表单对象一定要放在方法内，如果在data中定义，新增和修改都会有问题，会出现，修改第一行，其他行数据会一起变，新增一行，数据和上一行一样，这是vue v-model双向绑定机制，有兴趣的自己查找下，此处不在赘述。

3、删除操作

remove(index, num) {
    this.form.relativePersonNcidPositiveData.splice(index, 1);
},