Vue學習筆記之Element-UI表單校驗中的多層嵌套處理

VUE rules 多層嵌套

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 表單校驗（多層嵌套）//終極版​​