需求:当有多个参数类型时候,便利显示,并且value的输入框能各自校验。
1、表单代码:
<el-form-item
label="参数类型:"
label-width="150px">
<div v-for="(item,index) in form.paramsInfo" :key="index">
<el-form-item
label="value"
:prop="`paramsInfo.${index}.value`"
:rules="checkStripe"
label-width="90px"
label-position="left">
<el-input v-model="item.value" clearable></el-input>
</el-form-item>
<el-form-item
:label="form.paramsInfo.length>1?`名称 ${index+1} `:`名称 ` "
label-width="90px">
<el-input v-model="item.name"></el-input>
</el-form-item>
</div>
</el-form-item>
2、数据源
export default {
data() {
return {
form:{
paramsInfo:[
{
value: 0,
name: '实参'
}
{
value: 1,
name: '形参'
}
]
}
// value输入框的校验
checkStripe:[
{ required: true, message: '请输入value', trigger: 'blur' },
],
}
}
}
此需求的关键代码:
:prop="`paramsInfo.${index}.value`" // props不唯一化
:rules="checkStripe" // 校验规则
3、实现效果:
当paramsInfo只有一条数据的时候就不显示 名称1 / 名称2 中的1/2数字,
当大于1时候才依次排序