vue el-select 设置默认值后选项无法切换

最新推荐文章于 2024-09-11 10:52:43 发布

原创最新推荐文章于 2024-09-11 10:52:43 发布 · 901 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章讲述了在Vue项目中使用ElementUI的el-select组件时，如何在设置默认值后允许选项正常切换的问题，提出解决方案是添加`$forceUpdate()`方法。

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

vue el-select 设置默认值后选项无法切换解决方式

 @change="$forceUpdate()"  添加这个即可

完整的代码

<template>
    <el-form-item label="数据类型">
        <el-select v-model="queryParams.searchDataType" placeholder="请选择数据类型" clearable @change="$forceUpdate()">
          <el-option
            v-for="dict in dataTypeList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
</template>


<script>
export default { 
  data() {
    return {
      // 查询参数
      queryParams: {}, 
      dataTypeList: [
        {label:'实际数据',value:"1"},
        {label:'客户数据',value:"2"}
      ],
    };
  },
  created() {
    this.queryParams.searchDataType='1' 
  },
  methods: {}
}
</script>