Element-Ui中el-select选择后无法选中

Guo zy

已于 2023-05-30 16:14:00 修改

阅读量3.6k

点赞数 6

分类专栏： Vue 文章标签： ui vue.js javascript elementui

于 2023-04-13 14:39:13 首次发布

本文链接：https://blog.csdn.net/Alone_Endeavor/article/details/130129591

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在Vue项目中使用element-ui的select组件时，可能会遇到选择器无法实时更新的问题。原因是Vue无法检测到对象属性的动态添加。解决办法是在change事件中调用$forceUpdate()强制更新视图，确保选择的变化能正确反映在界面上。

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

在我们开发项目过程中，多数情况下回用到element-ui中的select选择器，在开发过程中，会遇到这种情况，

我们渲染完数据之后，el-select默认显示第一次选择的项，当我们切换后选择器并不能实时更新。

<el-select v-model="form.tenantId" placeholder="请选择渠道客户">
     <el-option
        :label="item.shortName"
        :value="item.tenantId"
       v-for="(item, index) in customerListInfo"
       :key="index"
      ></el-option>
</el-select>

 //所属客户列表
    getCustomerListFn() {
      customerListApi().then((res) => {
        this.customerListInfo = res.data;
      });
    },

vue.js官网给出这样一个结论：

受javascript的限制，vue不能检测到对象属性的添加或删除。由于Vue会在初始化实例时对属性执行getter/setter转换过程，所以属性必须在data中存在才能让vue转换它，这样才是响应式的，

具体来说就是在首次初始化之后，vue不会在进行加载渲染了，需要我们手动去执行渲染方法去重新加载它。

解决方案：使用Vue.js官方提供的vm.$forceUpdate()方法，该方法作用是迫使Vue实例重新渲染。

             <el-form-item label="所属客户列表:" label-width="120px">
              <el-select v-model="form.tenantId" placeholder="请选择客户列表"         
                @change="$forceUpdate()">
                <el-option
                  :label="item.shortName"
                  :value="item.tenantId"
                  v-for="(item, index) in customerListInfo"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>