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

最新推荐文章于 2025-03-19 19:43:54 发布

测试狂人

最新推荐文章于 2025-03-19 19:43:54 发布

阅读量1.2w

点赞数 3

文章标签： vue.js elementui javascript

本文为享有盛誉之名博主原创文章，未经博主允许不得转载。除非给我打钱，在征求本人同意即可。

本文链接：https://blog.youkuaiyun.com/bbs11007/article/details/125839936

版权

参考：Vue2 el-select下拉框，默认选择第一个值_猫小黑呀的博客-优快云博客_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