elementUI select组件 默认选择第一项

场景：后台返回最近医保年 5个年份的数据 [2019,2018,2017,2016,2015],将数据以props形式传入 searchForm组件 并以select形式作为搜索条件展示，默认选中最近一年

 

情况一：已知select options数组 如下设置：

export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '选项1'
      }
    }
  }

　　情况二：回到开始的场景

　处理数据

　　=>将[2019,2018,2017,2016,2015] 转为符合 options的数据格式

　　=>[{label:2019,value:2019},{label:2018,value:2018},{label:2017,value:2017},{label:2016,value:2016},{label:2015,value:2015}],

　　=>子组件接收 options ,并设置v-model="value" 的value = this.options[0].value;

父组件

<template>
  <div class="hello">
      <item :options="resArr"></item>
  </div>
</template>

<script>
import item from './a';
export default {
  name: 'HelloWorld',
  components:{
    item
  },
  data () {
    return {
      optionArr:[2019,2018,2017,2016,2015],
      resArr:[]
    }
  },
  created() {
    this.init();
  },
  methods: {
    init(){
      for(var val of this.optionArr){
        this.resArr.push({label:val,value:val})
      }

    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>


子组件
<template>
  <div>
    <el-select v-model="value" style="width:240px;" placeholder="请选择">
      <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:'item',
    props:{
      options:{
        type:Array,
        default:()=>{
          return [];
        }
      }
    },
    data() {
      return {
        value:''
      }
    },
    created() {
      this.value = this.options[0].value;
    },
  }
</script>

<style scoped>
</style>