VUE的el-select下拉框基本用法

参考：Vue2 el-select下拉框，默认选择第一个值_猫小黑呀的博客-CSDN博客_select下拉框默认选中第一个

el-select下拉框基本写法：

<el-form :inline="true" :model="formInline" class="demo-form-inline">
 
 
      <el-form-item label="名称">
 
 
        <el-select v-model="formInline.stationName" @change="onTitleChange">
          <el-option v-for="(item,index) in formInline.station" :label="item.station_name" :value="item.station_id"
                     :key="item.station_id"></el-option>
        </el-select>
 
 
      </el-form-item>
 
 
      <el-form-item>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
      </el-form-item>
 
    </el-form>

export default {
  name: 'Corporate-Contacts',
  data() {
    return {
      formInline: {
        station: [], //station_id的值
        station_Name: '', // name
        station_Id:'' // 配点站的id
      }
    }
  },
}

分下下分别为三部分：

<el-form :model="formInline" class="demo-form-inline">
</el-form>

<el-select v-model="formInline.stationName" @change="onTitleChange">
</el-select>

<el-option 
    v-for="(item,index) in formInline.station" 
    :label="item.station_name" 
    :value="item.station_id"
    :key="item.station_id"
>
</el-option>

第一部分是综合的model，第二部分是你选中的，第三部分下下拉要展示的

复杂的混合模式,嵌套两个下拉框：

<el-form :inline="true" :model="formInline" class="demo-form-inline">
 
 
 
 
 
        <el-select v-model="formInline.stationName.station_Name" @change="onTitleChange">
          <el-option v-for="(item,index) in formInline.stationName.station" :label="item.stationName.station_name" :value="item.stationName.station_id"
                     :key="item.station_id"></el-option>
        </el-select>
 
 
 
        <el-select v-model="formInline.TestName.name" @change="inTitleChange">
          <el-option v-for="(item,index) in formInline.TestName.station" :label="item.TestName.name" :value="item.TestName.id"
                     :key="item.station_id"></el-option>
        </el-select>
 
 
 
 
    </el-form>

export default {
  name: 'Corporate-Contacts',
  data() {
    return {
      formInline: {
        stationName:[
                station: [], //station_id的值
                station_Name: '', // name
                station_Id:'' // 配点站的id
        ],
        TestName:[
                station: [], //station_id的值
                Name: '', // name
                Id:'' // 配点站的id
        ],
        
      }
    }
  },
}

你想获取下拉框的所有内容，对应this.formInline.stationName和this.formInline.TestName

你想获取当前选中了哪个，this.formInline.stationName.station_Name和this.formInline.TestName.Name

默认选中第几项this.formInline.stationName[0].station_Name和this.formInline.TestName[0].Name