Element el-select - 切换单多选时显示问题

一、问题

直接上图

这里选择科目后，我再切换到柱状图，按道理是要这样

但是却这样

值没有被清空

这是啥问题呢，一开始百思不得其解

代码中使用了 v-if 安照常理，如果我切换了就会销毁，但是效果并不是这样，因为 vue复用了< el-select >中的input

vue出于提高性能，所以 vue 给复用了

也就是说根本原因是： vue 在切换的过程中，认为input不需要销毁重建，所以直接复用了。

二、解决方法

如何告诉vue 单选和多选不要复用呢？答案是 ----- 添加key 这里引用下官方文档

<div class="formRow">
  <div class="label">占比字段：</div>
  <div class="input_box">
    <el-select v-model="pieChartStyle.proportionParam" :key="pieChartStyle.proportionParam" placeholder="请选择">
      <el-option
        v-for="(item, index) in proportionOptions"
        :key="index"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</div>

以上就是我使用el-select切换单多选时遇到的问题以及解决方案，欢迎交流 耶耶耶。