Vue学习笔记之Element-UI表单校验中的多层嵌套处理

0x00 概述

本文主要记录VUE页面Element-UI表单校验中的多层嵌套处理。

 

0x01 Element-UI表单校验中多层嵌套

<el-row :gutter=20 class="with-bg" v-for="(product, idx) in productList" :key="product.id">
  <el-col :span="10">
    <el-form-item label="产品分类1" :prop="'productList.'+idx+'.productType'" :rules="[{required:true, message: '分类1不能为空', trigger: 'change' }]">
      <el-select clearable v-model="product.productType" placeholder="请选择产品分类1">
        <el-option v-for="param in getContent('PRODUCT_TYPE')"
                   :key="param.id"
                   :label="param.name"
                   :value="param.code"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="产品分类2" :prop="'productList.'+idx+'.subproductType'" :rules="[{required:true, message: '分类2不能为空', trigger: 'change' }]">
      <el-select clearable v-model="product.subproductType" placeholder="请先选产品分类2"
                 @change="value => effectMonthsHandler(value, idx)"
      >
        <el-option
          v-for="(item, index) in getContent('PRODUCT_SUB_TYPE').filter(r => r.parentParamId === (getContent('PRODUCT_TYPE').find(p => p.code === product.productType)||{}).id)"
          :key="index"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="2">
    <a  v-if="editable && productList.length > 1" class="delete-item" @click="deleteproductItem(idx)"><i class="el-icon-delete"></i></a>
  </el-col>
</el-row>

以上productList列表内的每个product对象有两个属性，分别为productType和subproductType；

在form-item内绑定prop，按照:prop="'productList.'+index+'.product'"方法，代码冗余切没法绑定productType和subProductType的关系

data () {
  return {
    ...省略...
    punishList: [],
    ...省略...
    rules: {
      "productList.0.productType'": [{ required: true, message: '产品分类1不能为空', trigger: 'change' }],
      "productList.1.productType'": [{ required: true, message: '产品分类1不能为空', trigger: 'change' }],
      "productList.2.productType'": [{ required: true, message: '产品分类1不能为空', trigger: 'change' }],
      "productList.3.productType'": [{ required: true, message: '产品分类1不能为空', trigger: 'change' }],
      "productList.4.productType'": [{ required: true, message: '产品分类1不能为空', trigger: 'change' }],
      ...省略...
      "productList.0.subProductType'": [{ required: true, message: '产品分类2不能为空', trigger: 'change' }],
      "productList.1.subProductType'": [{ required: true, message: '产品分类2不能为空', trigger: 'change' }],
      "productList.2.subProductType'": [{ required: true, message: '产品分类2不能为空', trigger: 'change' }],
      "productList.3.subProductType'": [{ required: true, message: '产品分类2不能为空', trigger: 'change' }],
      "productList.4.subProductType'": [{ required: true, message: '产品分类2不能为空', trigger: 'change' }],
      ...省略...
    },
  }
},

 

0x02 将:rules放到template内，实现动态绑定

将:rules放到template内，rules内不用在写针对productList的验证规则。

<el-form-item label="产品分类1" :prop="'productList.'+idx+'.productType'" :rules="[{required:true, message: '分类1不能为空', trigger: 'change' }]">

 

0x03 参考

Vue 篇 解决ELement UI 中表单验证(多层Object嵌套)

vue elementUI 表单校验（多层嵌套）//终极版

Vue——rules动态判定require布尔值及1-255正则表达式