Vue Element UI el-select 回显问题：当 v-model 值不在选项数组中时的处理

<p>当使用 Vue Element UI 的 el-select 组件时，如果 v-model 的值在选项数组中不存在，那么在回显时会显示为空。这是因为 v-model 的值必须是选项数组中的一个有效值，否则无法匹配选项并显示。</p>
<p>如果想要在 v-model 的值不在选项数组中时也显示一个默认值，可以使用以下方法：</p>
<h2>1. 使用 computed 属性处理 v-model 值</h2>
<p>可以使用 computed 属性来处理 v-model 的值，如果 v-model 的值不在选项数组中，则返回一个默认值。</p>
<pre><code><template>
  <el-select v-model='selected' :options='options'>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      options: ['A', 'B', 'C'],
      selected: 'D'
    }
  },
  computed: {
    computedSelected() {
      if (this.options.includes(this.selected)) {
        return this.selected
      } else {
        return this.options[0] // 默认选第一个
      }
    }
  }
}
</script></code></pre>
<h2>2. 在 mounted 钩子函数中检查 v-model 值</h2>
<p>可以在 mounted 钩子函数中检查 v-model 的值是否在选项数组中，如果不在则将其设置为默认值。</p>
<pre><code><template>
  <el-select v-model='selected' :options='options'>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      options: ['A', 'B', 'C'],
      selected: 'D'
    }
  },
  mounted() {
    if (!this.options.includes(this.selected)) {
      this.selected = this.options[0] // 默认选第一个
    }
  }
}
</script></code></pre>
<p>以上两种方法都可以解决 el-select 回显时 v-model 值不在选项数组中的问题，您可以根据自己的需求选择合适的方法。</p>