动态表单验证

src/views/system/dict/index.vue

@@ -196,7 +196,7 @@
         <!--          </el-radio-group>-->
         <!--        </el-form-item>-->
         <el-form-item label="父字典名称">
-          <el-select v-model="form.parentId" style="width: 100%" clearable placeholder="请选择父字典类型" @change="getOptions">
+          <el-select v-model="form.parentId" style="width: 100%" clearable placeholder="请选择父字典类型" @clear="setRules" @change="getOptions">
             <el-option
               v-for="item in options"
               :key="item.businessId"
@@ -205,7 +205,7 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item v-show="form.parentId">
+        <el-form-item v-show="form.parentId" prop="dataId">
           <el-select v-model="form.dataId" style="width: 100%" clearable placeholder="请选择父字典数据" @visible-change="clearSelected">
             <el-option
               v-for="item in optionsDict"
@@ -379,6 +379,9 @@ export default {
         dictType: [
           { required: true, message: '请输入字典类型', trigger: 'blur' }
           // { validator: verifyTypeProp, trigger: 'blur' }
+        ],
+        dataId: [
+          { required: true, message: '请输入父字典数据', trigger: 'blur' }
         ]
       },
       manageLoading: false
@@ -422,10 +425,19 @@ export default {
       }
       )
     },
+    // 动态表单验证
+    setRules() {
+      if (this.form.parentId !== null && this.form.parentId !== '') {
+        this.$set(this.rules, 'dataId', [{ required: true, message: '请输入父字典数据', trigger: 'blur' }])
+      } else {
+        this.$delete(this.rules, 'dataId')
+      }
+    },
     // 获取当前父字典数据
     getOptions(val) {
       selectDictType(this.options.find(item => { return item.businessId === val }).dictType).then(response => {
         this.optionsDict = response.data
+        this.setRules()
       })
       // this.form.dataId = ''
     },
@@ -494,6 +506,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset()
+      this.setRules()
       this.open = true
       this.title = 'add'
     },
@@ -509,6 +522,7 @@ export default {
       const dictId = row.businessId || this.ids
       getType(dictId).then(response => {
         this.form = response.data
+        this.setRules()
         this.$nextTick(() => {
           if (response.data.dataId !== null) {
             this.form.dataId = response.data.dataId.toString()