vue的el-select绑定的值无法选中el-option问题及解决

当使用Vue的el-select组件时，可能会遇到无法选中el-option的问题。这个问题常见于el-option基于v-for动态渲染的情况下。

出现这个问题的原因，是因为el-select组件中v-model绑定的值和el-option组件中v-bind:value绑定的值类型不一致导致的。解决这个问题有以下两种方法：

方法一：更换v-model绑定的值的类型

如果el-select组件中v-model绑定的值是数值类型，而el-option组件中v-bind:value绑定的值是字符串类型，则无法实现选中。

<!-- 问题代码 -->
<el-select v-model="selectedValue">
  <el-option v-for="item in options" v-bind:key="item.value" v-bind:value="item.value">{{ item.label }}</el-option>
</el-select>

<script>
  export default {
    data() {
      return {
        options: [
          { label: '选项一', value: '1' },
          { label: '选项二', value: '2' },
          { label: '选项三', value: '3' }
        ],
        selectedValue: 1
      };
    }
  };
</script>

解决的方法是更改selectedValue的初始值为字符串类型。这样就可以实现选中el-option了。

<!-- 解决代码 -->
<el-select v-model="selectedValue">
  <el-option v-for="item in options" v-bind:key="item.value" v-bind:value="item.value">{{ item.label }}</el-option>
</el-select>

<script>
  export default {
    data() {
      return {
        options: [
          { label: '选项一', value: '1' },
          { label: '选项二', value: '2' },
          { label: '选项三', value: '3' }
        ],
        selectedValue: '1'
      };
    }
  };
</script>

方法二：使用el-option的label属性

另一种解决这个问题的方法是使用el-option的label属性。el-option组件中的label属性是用于显示的文本，而v-bind:value绑定的值是用于传递的值。这样就可以保证el-select和el-option组件中传递的值类型一致了。

<!-- 解决代码 -->
<el-select v-model="selectedValue">
  <el-option v-for="item in options" v-bind:key="item.value" v-bind:value="item.label">{{ item.label }}</el-option>
</el-select>

<script>
  export default {
    data() {
      return {
        options: [
          { label: '选项一', value: '1' },
          { label: '选项二', value: '2' },
          { label: '选项三', value: '3' }
        ],
        selectedValue: '选项一'
      };
    }
  };
</script>

以上就是解决Vue的el-select绑定的值无法选中el-option问题的完整攻略，希望可以对大家有所帮助。