el-form clear some required items check clearValidate

 Scenes:

• When switching "Supplier Type", you need to clear the value of "Brand" (required) and make a new selection. If "Business" is selected as the supplier type, the "Channel" field (required) is displayed, and when other values ​​are selected, js is required to clear the value of the "Channel" field.

question:

1. When "Brand" is cleared, verification will be automatically triggered. After clearing, this field on the page will be marked red and the verification result and prompt will be displayed.
2. After hiding and clearing, when you select "Business" again to display it, the verification result will be displayed.

expect:

• When switching the "supplier type", the fields hidden/displayed through v-if (such as: "channel") and the fields that have been displayed (such as: "brand") are all cleared, and the page does not feedback/display the verification (failure )the result of

Solution:

html：

<el-form-item label="供应商分类" prop="providerType">
  <el-select v-model="form.providerType" placeholder="请选择供应商分类" @change="change_providerType">
    <el-option v-for="item in options_supplier" :key="item" :label="item" :value="item" />
  </el-select>
</el-form-item>

<el-form-item label="品牌" prop="brand" key="brand">
  <el-select v-model="form.brand" placeholder="请选择">
    <el-option v-for="item in options_brand" :key="item" :label="item" :value="item" />
  </el-select>
</el-form-item>

<div v-if='form.providerType=="业务"'>
  <el-form-item label="渠道" prop="channel" key="channel">
    <el-select v-model="form.channel" placeholder="请选择渠道" clearable multiple>
      <el-option v-for="(item,ind) in options_channels" :key="ind" :label="item" :value="item" />
    </el-select>
  </el-form-item>
</div>

js：

  change_providerType() {

    this.form.channel = '';

    if (this.form.brand) this.form.brand = '';
    /*
        clearValidate：一定要放在$nextTick中，不然不生效;
       • 清空全部字段校验结果：this.$refs["form"].clearValidate();
       • 清空部分字段校验结果：this.$refs["form"].clearValidate(['brand','channel']);

       * 注意：clearValidate 一定要放在$nextTick中，不然不生效。
    */

    // this.$refs["form"].clearValidate(['brand', 'channel']); // 不生效 - 还是会在上面js清空值的时候触发校验结果。

    this.$nextTick(() => { //生效
      this.$refs["form"].clearValidate(['brand', 'channel']);
    })
  }