emsfront/src/components/Ems/ZdSelect/index.vue

<!--站点选择组件-->
<template>
  <div class="zd-select-container">
    <el-form :inline="true">
      <el-form-item label="站点选择">
        <el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="change">
          <el-option :label="item.siteName" :value="item.id" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">

</style>
<script>
import {getAllSites} from '@/api/ems/zddt'
  export default {
    props:{
      defaultSiteId:{//默认展示的站点ID
        type:String|Number,
        default:'',
        required:false
      }
    },
    data() {
      return {
        id:'',
        loading:false,
        siteList:[]
      }
    },
    methods:{
      onSubmit(){
        this.$emit('submitSite',this.id)
      },
      change(id){
        this.$emit('changeSite',id)
      }
    },
    mounted(){
      this.loading=true
      this.$nextTick(()=>{
        getAllSites().then(response => {
          this.siteList = response.data || []
          console.log("获取站点列表返回数据",response,this.siteList)
          // 页面初始化 设置默认选中的站点
          const defaultSite = this.defaultSiteId
          if(defaultSite&& this.siteList.find(item=>item.id == defaultSite)){
            this.id = parseInt(defaultSite)//defaultSite会传来字符串类型 电站列表返回的书number类型 两个数据的类型不匹配时下拉框的默认值会显示有问题
          }else if(!defaultSite && this.siteList.length>0){
            this.id = this.siteList[0].id
          }
          this.$emit('submitSite',this.id)
        }).finally(() => {this.loading=false})
      })
    }
  }
</script>