表单内容如果是数组需要循环遍历,那么我们平常prop直接写一个名字就不能校验了,因为他不知道我们要校验哪一个,所以我们的prop就要绑定mode对象下的后边所有的数据 相当于就是所我们要绑定的是对象下的哪一个数组,数组下的哪一个对象,对象下绑定的哪一个字段,prop绑定过之后,我们还要添加:rules重新绑定校验规则,下方有prop和rules代码示例
<template>
<el-form
:model="manui_list"
:rules="manui_rules"
ref="manui_form"
class="manui_form"
>
<el-form-item
label='装货点'
v-for="(item, index) in manui_list.form"
:key="item.id"
:prop="`form[${index}].location`"
:rules="manui_rules.location"
>
<el-select
v-model="manui_list.form[${index}].location"
placeholder="请选择"
>
<el-option label="上海" :value="1">
</el-option>
<el-option label="北京" :value="2">
</el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default{
data(){
return {
manui_list: {
form:[
{
id: 1,
location: null,
num: '',
weight: ''
},
{
id: 2,
location: null,
num: '',
weight: ''
}
]
},
// 表单验证
manui_rules: {
location: [
{ required: true, message: '请选择装货点', trigger: 'change' }
],
num: [
{ required: true, message: '请输入数量', trigger: 'blur' }
],
weight: [
{ required: true, message: '请输入重量', trigger: 'blur' }
],
},
}
}
}
</script>
通过代码示例可以看出 el-select 绑定的对象,而prop锁定的是manui_form 下的绑定的字段,之后用绑定rules重新校验规则,这种绑定我们一般是用作于表单验证下,需要添加某一项时,才如此使用。