el-form表单 动态渲染下拉选项值 校验失效 不成功的问题

问题发现

在日常开发中少不了会有根据某一项的值去动态改变另一项选项值的需求

例如 整改人 必须是 整改单位下面对应的人
不出意外的话会出现各种情况下的验证失效

下面直接上代码

页面

    <el-dialog :title="!type ? '新增' : '编辑'" :close-on-click-modal="false" append-to-body
      :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
      <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="120px"
        label-position="right">
        <el-form-item label="区域：" prop="dutyName">
          <el-input v-model="dataForm.dutyName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="整改单位：" prop="dutyUnitStr">
          <JNPF-TreeSelect v-model="dataForm.dutyUnitStr" :options="deptNameOptions"
            :multiple="true" :props="{value:'fullName', label: 'fullName', children: 'children', }"
            placeholder="请选择" @change="changeOrganize" />
        </el-form-item>
        <el-form-item label="整改人：" prop="dutyMemberStr">
          <el-select v-model="dataForm.dutyMemberStr" placeholder="请选择" clearable multiple
            :style="{ width: '100%' }" :disabled="disabledMan" @change="clickMember">
            <el-option v-for="(item, index) in dutyMemberOptions" :key="index"
              :label="item.realName" :value="item.realName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeSubmit() "> 取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">
          确 定</el-button>
      </span>
    </el-dialog>

校验规则

data() {
    return {
      deptNameOptions: [],
      dutyMemberOptions: [],
      disabledMan: true,
      dataForm: {
        dutyName: "",
        dutyUnit: "",
        dutyUnitStr: [],
        dutyMemberStr: [],
        dutyMember: "",
        dutyMemberId: '',
      },
      rules: {
        dutyName: [{ required: true, message: "请输入", trigger: "blur" }],
        dutyUnitStr: [
          { required: true, message: "请选择", trigger: ["blur", "change"], },
          {
            validator: this.dutyUnitStr,
            trigger: 'change',
            type: 'array'
          }
        ],
        dutyMemberStr: [
          { required: true, message: "请选择", trigger: ["blur,change"], },
          {
            validator: this.dutyMemberStr,
            trigger: 'change',
            type: 'array'
          }
        ],
      },
    }
  }

方法

	//  单位的校验
    dutyUnitStr(rule, value, callback) {
      if (rule.type === 'array') {
        if (this.dataForm.dutyUnitStr.length < 1) {
          return callback(new Error('请选择'))
        } else {
          return callback();
        }
      } else {
        return callback();
      }
    },
    // 人员的校验
    dutyMemberStr(rule, value, callback) {
      if (rule.type === 'array') {
        if (this.dataForm.dutyMemberStr.length < 1) {
          return callback(new Error('请选择'))
        } else {
          return callback();
        }
      } else {
        return callback();
      }
    },
    changeOrganize(val, node) {
      this.dataForm.dutyUnitStr = val
      this.$forceUpdate()
      if (this.dataForm.dutyMemberStr) {
        this.dataForm.dutyMemberStr = []
        this.dataForm.dutyMember = ""
        this.dataForm.dutyMemberId = ''
      }
      this.disabledMan = true
      let arr = []
      this.dataForm.dutyUnit = val.join(',')
      node.forEach((item, index) => {
        arr.push(item.id)
      })
      this.getOptionData(arr)
    },
    clickMember(val, e) {
      let arr = []
      val.forEach(item => {
        this.dutyMemberOptions.forEach(ele => {
          if (item == ele.realName) {
            arr.push(ele.id)
          }
        })
      })
      this.dataForm.dutyMember = val.join(',')
      this.dataForm.dutyMemberId = arr.join(',')
      this.$forceUpdate() 
    },

其实要注意的地方主要就是对值的一个 深层校验 和 页面的更新