vue el-select 2个下拉框联动时产生的无法选中值的bug

小砖家

已于 2022-07-23 15:44:06 修改

阅读量2.2k

点赞数 6

分类专栏： web前端文章标签： elementui 前端前端框架

于 2022-07-23 14:54:59 首次发布

本文链接：https://blog.csdn.net/lianxueliushi/article/details/125947503

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中遇到的两个下拉框联动问题，当学校选择变化时，专业下拉框的数据源更新但原有选中值未清除导致无法重新选中。解决方法包括使用`this.$set`更新数据视图，直接在data中声明变量，以及通过`@change`事件强制刷新组件。这些方法可以帮助开发者在遇到类似问题时有效地更新和管理组件状态。

摘要由CSDN通过智能技术生成

问题描述：

做项目时用了2个el-select下拉框，一个下拉框选择学校，一个下拉框选择专业，专业的数据源是根据学校的选择来动态改变的，由于后台没有写成树的形式，所以写了2个下拉框进行联动。

这里就有一个问题：学校改变后，虽然专业的数据源发生了变化，但是原来的专业绑定值并没有清空，所以我在此就手动清空了专业的值。

这是就有了这个奇怪的问题，学校改变后，原来的专业绑定值虽然清空了，但是却无法选中了。

解决办法1：使用 this.$set 来设置变量的值，让视图重新render

在学校的值改变时，清空原专业值时用$set()，而不是直接赋值为空。

schoolChange (value) {
    // this.form.specialtyid=''
    this.$set(this.form, 'specialtyid', '')
    
    if (!value) {
      this.specialtyList = []
    } else {
      this.GetspecialtynList(value)
    }
},

解决办法2：直接声明specialtyid变量

另一种解决办法，就是将specialtyid的值，直接写到data里，el-select绑定值也直接使用specialtyid,而不是使用form.specialtyid，此时再清空specialtyid的值就可以直接赋值了

解决办法3：给专业的el-select添加@change事件

        <el-select v-model="form.specialtyid" @change="specChange">
            <el-option
              v-for="item in specialtyList"
              :label="item.orgname"
              :key="item.orgid"
              :value="item.orgid"
            ></el-option>
        </el-select>



 
        specChange () {
          //强制刷新
          this.$forceUpdate()
        },