简介

今天写项目，需要循环出select内的数据以后，页面一加载默认选中第一个数据，写完循环发现原本默认显示第一条的select框没变化，要选择后才有显示，结果查了好多文档，讲的都不是很清楚，自己研究了一下,发现很简单,记录一下。

一.初始效果 

二.代码 

<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>

三.效果