如何使el-select上级修改下级清空

如何使el-select上级修改下级清空

el-select更改后如何让下级所有的搜索框滞空

先将代码放上，在这些代码中需要注意的就是v-model要将v-model中的值拷贝出来然后放大watch中进行监听。同时要注意要在select中加入event @visible-change 同时在其中加入函数handleSelectVisibleChange 此函数命自己定义

事件名称	说明	回调参数
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false

<el-select
                  v-model="quaryform.productSelect"
                  placeholder="请选择产品"
                  size="mini"
                  class="history_item"
                  style="width: 130px"
                  @change="productModel"
                  @visible-change="handleSelectVisibleChange"
                >
                  <el-option v-for="item in productID" :key="item.productId" :label="item.productName" :value="item.productId" />
                </el-select>
                <el-select
                  v-model="quaryform.equipmentSelect"
                  placeholder="请选择设备"
                  size="mini"
                  class="history_item"
                  style="width: 130px"
                  @change="equipment"
                  @visible-change="handleSelectVisibleChange"
                >
                  <el-option v-for="item in deviceName" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-select
                  v-model="quaryform.elementSelect"
                  placeholder="请选择属性"
                  size="mini"
                  class="history_item"
                  style="width: 130px"
                  @change="propertyValue"
                  @visible-change="handleSelectVisibleChange"
                >
                  <el-option v-for="item in deviceInfo" :key="item.id" :label="item.name" :value="item.id" />

watch监控的值

通过监听select中的model然后看他们是否变化

watch:{
'quaryform.productSelect'(newVal, oldVal) {
      if (this.isSelectVisible) {
        // 清空关联的子选项值
        this.quaryform.equipmentSelect = ''
      }
    },
    'quaryform.equipmentSelect'(newVal, oldVal) {
      if (this.isSelectVisible) {
        // 清空关联的子选项值
        this.quaryform.elementSelect = ''
      }
    },
    }

methods中的函数

看下拉框中的值是否改变，如果改变则会使isSelectVisible变为true从而改变v-model中的数值

handleSelectVisibleChange(v) {
      this.isSelectVisible = v
    },

data中的定义

data(){
    return {
        isSelectVisible: false, // 是否是下拉框出现触发
    }
}

此时就能实现当上级变化下级变空的状态