element官方关于el-select组件的api中并没有直接说明如何设置option的默认值,官方的value / v-model说明是绑定值,这就会给很多新手造成困惑,我想给el-option第二个选中状态,怎么办?

官方文档:https://element.eleme.cn/#/zh-CN/component/select

Element给Select 选择器设置默认值(如何给el-select组件设置默认值)-QUI-Notes

很明显,我看完了整个官方关于组件的api说明,别没有找到类似html5中slect标签选中option设置默认值selected 的方法。

困扰了我,也有可能我陷入了html5的误区,其实开头说的  v-model  就是设置默认值的答案!由于vue的双向绑定特性,我们切换selcet后选中的值就添加到v-model绑定的值里面,所以答案呼之欲出!


Element给Select 选择器设置默认值

<template>
    <div class="select">
       <el-select v-model="aa">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
       </el-select>
    </div>
  </template>
  
  <script>
  export default {
    name: "select",
    data() {
      return {
        aa:"选项2", //默认值
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      };
    }
  };
  </script>

效果如下:

Element给Select 选择器设置默认值(如何给el-select组件设置默认值)-QUI-Notes

这样就很容易给select组件设置默认值了,估计是我的脑子没有转明白,又是被一个白痴问题绊倒了!不过实践是学习的最佳途径,多测试一下就可以了。