问题发现

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

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

下面直接上代码

页面

    <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() 
    },

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