Vue uses Element's select selector, which needs to select the first one by default

Introduction

When I write a project today, I need to loop out the data in the select. Once the page is loaded, the first data is selected by default. After writing the loop, I find that the select box that originally displayed the first item by default has not changed. It will only be displayed after selection. The result is a lot of checking. The documentation is not very clear. I researched it myself and found it is very simple. Record it.

1. Initial effect 

2. Code 

<template>
 <div class="statistical">
        <span>请选择店铺：</span>
        <div>
          <el-select
            :multiple-limit="5"
            v-model="oilStation"
            multiple
            collapse-tags
            style="margin-left: 20px"
            placeholder="请选择"
            @change="chooseTheGasStation"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
          </div>
        </template>
     <script>
         xport default {
          name: "NonOilHistoricalData",
            data() {
            return {
              oilStation:[],
        options: [
        {
          value: "1",
          label: "金龙便利店",
        },
        {
          value: "2",
          label: "南湖便利店",
        },
        {
          value: "3",
          label: "安燕便利店",
        },
        {
          value: "4",
          label: "滨海便利店",
        },
        {
          value: "5",
          label: "北京路便利店",
        },
        {
          value: "6",
          label: "眼镜盒便利店",
        },
        {
          value: "7",
          label: "软件产业基地便利店",
        },
      ],
}
},
 created() {
 
 页面加载时赋值给v-model绑定的"oilStation"值

    this.oilStation .push(this.options[0].value) 
      console.log('this.oilStation',this.oilStation);
  },
}
</script>

3. Effect