前端开发之el-select 设置默认值后选项无法切换

原创已于 2024-05-07 13:47:14 修改 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-04-07 21:42:38 首次发布

element-plus 专栏收录该内容

11 篇文章

订阅专栏

本文讲述了在使用ElementUI的el-select组件时，如何在设置默认值后恢复选项的正常切换功能，通过添加`v-model`的`change`事件并调用`$forceUpdate()`方法来实现。

前端开发之el-select 设置默认值后选项无法切换

前言
解决方案

前言

在实际使用过程中发现再给el-select设置默认值之后选项无法进行切换了，当我们使用v-if隐藏后再次放开的时候也会出现存在默认值而无法切换

解决方案

为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>