el-form 对表单对象里的数组项进行校验

NewMember0220

已于 2024-08-15 10:43:34 修改

阅读量487

点赞数 1

分类专栏： element-ui 文章标签： vue.js javascript 前端

于 2024-08-13 15:56:39 首次发布

本文链接：https://blog.csdn.net/NewMember0220/article/details/141166086

版权

element-ui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

template部分

<div class="form-items" v-for="(data, index) in form.list" :key="index">
  <el-form-item 
    label="共用单位" 
    :rules="rules['attribute']" 
    :prop="'list.'+ index + '.attribute'"
  ></el-form-item>
</div>

data部分

rules: {
  attribute: [
    { required: true, message: "请选择", trigger: "change" },
    // 自定义校验
    { required: true, validator: (rule, value, callback) => {
      if (value && this.form.list) {
        let arr = this.form.list.reduce((r, v, i) => {
          return r.concat(v.attribute === value? i : [])
        }, [])
        if (value === this.form.institutionId) {
          callback(new Error('共用单位为本单位，请选择其他单位'))
        } else if (arr && arr.length > 1 && arr instanceof Array) {
          callback(new Error('单位填写重复，请重新选择'))
        } else {
          callback()
        }
      }
    },  trigger: "change" },
  ],
}