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

前言

在实际使用过程中发现再给el-select设置默认值之后选项无法进行切换了

解决方案

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