el-select选中但是不显示问题

最新推荐文章于 2025-10-09 10:09:08 发布

原创最新推荐文章于 2025-10-09 10:09:08 发布 · 6.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #前端框架

在Vue中遇到一个问题，当动态新增属性如'groupUser'时，无法监听其变化，导致选择牵头部门后，分管领导的选择显示异常。解决办法是使用$set方法更新属性，例如在'pickChange'方法中通过this.$set(this.addForm, 'groupUser', val)进行赋值，从而确保页面显示正确。

如图所示，选择分管领导的时候，因为分管领导的数据是根据牵头部门变换的，然而vue无法监听动态新增的属性的变化，所以选择牵头部门后再选择分管领导会出现选中但是不显示的情况

            <el-form-item label="牵头部门" prop="groupDept">
              <treeselect
                class="inline-input"
                v-model="addForm.groupDept"
                :options="deptOptions"
                :normalizer="normalizer"
                :show-count="true"
                @change="chooseMember"         //选择后获取分管领导列表
                placeholder="请选择牵头部门"
              />
            </el-form-item>
            <el-form-item label="分管领导" prop="groupUser">
              <el-select
                class="inline-select"
                v-model="addForm.groupUser"   //绑定的数据
                @change="pickChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in leaderOptions"  //动态获取的分管领导列表
                  :key="item.value+''"
                  :label="item.label"
                  :value="item.value+''"
                />
              </el-select>
            </el-form-item>

解决方案

.将绑定的数据addForm.groupUser更换绑定为groupUser，调接口的时候进行单独赋值

使用$set进行赋值，即可更改页面显示

  pickChange(val){
      this.$set(this.addForm,this.addForm.groupUser,val)
    },