Vue2 el-select下拉框，默认选择第一个值

一个前端不会用git

已于 2022-06-28 09:40:41 修改

阅读量6.7k

点赞数

分类专栏： element Vue 文章标签： vue.js 前端 javascript

于 2022-06-28 09:26:03 首次发布

本文链接：https://blog.csdn.net/maoxiaohei_/article/details/125495959

版权

Vue 同时被 2 个专栏收录

57 篇文章 1 订阅

订阅专栏

element

14 篇文章 0 订阅

订阅专栏

此博客介绍了如何使用Element UI实现一个企业联系人管理页面，通过el-select组件实现实时选择配电站名，并在change事件中更新station_id。数据从API获取并存储在Vuex状态中，便于状态管理。

摘要由CSDN通过智能技术生成

	 
	 <!-- 下拉框默认选择第一个值 -->
 	<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>

import {
  getStationList
} from '@/api/power-safety/corporate'

export default {
  name: 'Corporate-Contacts',
  data() {
    return {
      formInline: {
        station: [], //station_id的值
        stationName: '', // name
        stationId:'' // 配点站的id
      }
    }
  },
  beforeMount() {
    this.getStationList()
  },
  methods: {
    // 获取配电站列表
    getStationList() {
      getStationList({
        user_id: this.$store.getters.user_id
      }).then(res => {
        this.formInline.station = res.data
        this.formInline.stationName = res.data[0].station_name
        this.formInline.stationId = res.data[0].station_id
        console.log(res)
      })
    },
    //获取动态选中的station_id
    onTitleChange(val){
      this.formInline.stationId = val
      console.log(val)
    }
  }
}