VUE 表单中第二个下拉框要根据第一个下拉框数据进行选择（必须先选择第一个，才能选择第二个）

1、当第一个下拉框未选择数据时，第二个下拉框先disabled，并校验提示请先选择第一个下拉框。

2、当选择完第一个下拉框后，触发change事件。第二个下拉框变为可以选择，同时清除 ‘请先选择第一个下拉框’ 的校验提示。

3、对第二个下拉框的校验提示语句更新。

代码部分：

1、表单

<el-form ref="form" :rules="rules" :model="dialogForm" label-width="105px">
  <el-form-item label="配置类型" prop="data1">
    <el-select class="w-450" v-model="dialogForm.data1" clearable placeholder="请选择配置类型" @change="handleChange">
      <el-option v-for="item in configurationTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="插件类型" prop="data2" :rules="dialogForm.data1 == ''?rules.data2:[{required: true, message: '请选择插件类型', trigger: 'change' }]">
    <el-select class="w-450" v-model="dialogForm.data2" clearable placeholder="请选择插件类型" :disabled="dialogForm.data1==''">
       <el-option v-for="item in dialogPluginTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
</el-form>

2、表单的校验

rules: {
  data1: [{required: true, message: '请选择配置类型', trigger: 'change'}],
  data2: [{required: true, message: '请先选择配置类型', trigger: 'change'}],
},

3、方法

handleChange(){
  this.$set(this.dialogForm,'data2','')
  //清除校验的提示语
  this.$refs['form'].clearValidate('data2');

  //还需要自行加上获取第二个下拉框数据的事件
  this.xxxx();
},