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

最新推荐文章于 2025-05-04 14:28:46 发布

liuwenjie_

最新推荐文章于 2025-05-04 14:28:46 发布

阅读量6k

点赞数

文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.youkuaiyun.com/liuwenjie_/article/details/121229605

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示，选择分管领导的时候，因为分管领导的数据是根据牵头部门变换的，然而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)
    },