vue-element动态生成的表单检验使用validator属性

在实际项目中使用element表单校验往往会遇到在动态生成的表单中使用validator属性校验的情况,直接上代码

template部分:
<el-form-item :prop="'list.' + index + '.prop'" :rules = [
	{validator: myValidate, trigger: 'blur'}
]>
	<el-input v-model="item.prop"></el-input>
</el-form-item>

如果这时候使用常规的那种在data声明myValidate是不行的,因为validator接收的是一个回调函数。所以我们这时候要想到使用computed这是属性

在这里我就简单的演示一下,具体请各位结合实际场景

sciprt部分:
computed: {
    myValidate() {
      return function(rule, value, cb) {
        if (!value) {
          cb(new Error('不能为空'))
        } else {
          cb()
        }
      }
    }
  },

最终实现的效果就是预期的那样
在这里插入图片描述

你可能感兴趣的:(vue)