最近有个需求,需要做一个动态表单,且必须往校验规则中传参,官方文档不提供传参的方法,在网上搜了是没有解决方案的。以下是我目前想到的最优解。
<el-form-item
:prop="'productPeriodLimitVos[' + index + '].dayBegin'"
:rules="rules.dayBegin"
:ref="'dayBegin['+index+']'"
:id="item.id"
>
<el-date-picker
type="datetime"
v-model="item.dayBegin"
:index="index"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
rules:{
dayBegin: [{
required: true,
trigger: ['blur', 'change'],
validator: (rule, value, callback) => {
// 这个index是本item的index
const i = rule.field.split('.')[0].indexOf('[');
const index = rule.field.split('.')[0].slice(i + 1, rule.field.split('.')[0].length - 1);
// 这个itemAttrs里面有传递的参数id
const itemAttrs = this.$refs[`dayBegin[${index}]`][0] ? this.$refs[`dayBegin[${index}]`][0].$attrs : null;
callback();
},
},
],
}
1.从rule里面拿到这个item的index
2.获取到包含index的动态ref的组件
3.组件的$attrs里面就有写在formItem上的参数(id)