vue+element动态新增表单并校验

   <el-button @click="addCarType">添加</el-button>

            <el-form :model="detailList"  label-width="120px" class="demo-ruleForm"  ref="detailList" :rules="formRules">
                <div v-for="(item,index) in detailList.carType" :key="item.type">
                    <el-form-item :label="$t('car.add.carType')" :prop="'carType.' + index +'.type'" :rules="formRules.change">
                    <el-select v-model="item.type">
                        <el-option v-for="item in carTypeOptions" :key="item.key" :value="item.value" :label="$t(item.label)"></el-option>
                    </el-select>
                    </el-form-item>
                </div>
            </el-form>
            
   <el-button @click="submitForm">提交</el-button>

<script lang="ts">
import Vue from 'components/base'
import { Component } from 'vue-property-decorator'
import { formRules } from "../common/validator";
import {  CarType  } from 'common/enums'
@Component({
    components: {}
})
export default class CarInfo extends Vue {
    public formRules = formRules;

    public $refs:{
        detailList: HTMLFormElement
    }
    public detailList:any ={
        address:'XXX',
        carType:[
        	{type:'',length:''}
        ]
    }
    public carTypeOptions = CarType.getSelect(false)

    public addCarType (){
        this.detailList.carType.push({type:'',length:''})
    }

    public submitForm (){
        this.$refs.detailList.validate(vaild=>{
            if(vaild){

            }else{
                this.$message.error("验证不通过");
            }
        })
    }
}

注意正常验证表单项是prop，而这里是:prop。
:prop="‘carType.’ + index +’.type’"是拼接的形式，前面是v-for绑定的数组，中间是数组索引index，最后是表单项绑定的v-model的名称，然后用点.把它们连接起来。这三项都必须保证正确，错一个都无法验证。

//表单校验规则
export var formRules = {
    blur: [
        { required: true, pattern: /\S/, message: '此项为必填项', trigger: 'blur' },
    ],
    /* select框 */
    change: [
        { required: true, message: '此项为必填项', trigger: 'change' },
    ],
    default:[]
}