ElementUI 表单项联动

Question

Vue + Element UI 前端环境下，表单项A（下拉框）的选择会影响表单项B（日期选择器）是否需要选择。
当A选择B不需要输入的情况下，将B清空并禁用。
为A绑定change事件，满足条件是B执行 resetFiled 方法。
前端页面效果不理想，该输入B内容时，选择后B没有展示出来。
是什么原因导致的？

Answer 1

你这问题核心就俩坑，改起来超简单：

问题根源（就这俩大概率）

1. resetField用错了：它不光清值，还会重置控件状态，你只清了B的值但没恢复禁用状态，导致选了日期也显示不出来；
2. 禁用/显示状态和Vue响应式不同步：手动改disabled或用DOM操作，没靠:disabled绑定，选的值没同步到v-model里。

极简修复（直接套）

<el-form ref="formRef" :model="form">
  <!-- 下拉A -->
  <el-select v-model="form.a" @change="handleAChange">
    <el-option label="不用填B" value="no"></el-option>
    <el-option label="要填B" value="yes"></el-option>
  </el-select>
  <!-- 日期B：用a的值控制禁用，别手动改 -->
  <el-date-picker v-model="form.b" :disabled="form.a === 'no'"></el-date-picker>
</el-form>

<script>
methods: {
  handleAChange(val) {
    if (val === 'no') {
      this.form.b = ''; // 直接清空，别依赖resetField
      this.$refs.formRef.resetField('b'); // 只用来清校验红框
    } else {
      this.$nextTick(() => this.$forceUpdate()); // 强制刷新，解决选值不显示
    }
  }
}
</script>

关键避坑

1. 别手动改disabled（比如查DOM禁控件），全靠:disabled="form.a === 'no'"绑定；
2. resetField只清校验，清值直接改form.b = ''；
3. 切换状态后加$nextTick + $forceUpdate，解决日期选了不显示的问题。

按这改，A选“要填B”时B能正常选且显值，选“不用填B”时B清空+禁用，稳得很～