|  |  | <template> | 
|  |  | <div> | 
|  |  | <el-select v-model="nationality" | 
|  |  | filterable | 
|  |  | @click.native="getCountry" | 
|  |  | @change="selectChange" | 
|  |  | default-first-option | 
|  |  | :loading="loading" placeholder="请选择" | 
|  |  | style="text-transform:uppercase"> | 
|  |  | <el-option | 
|  |  | v-for="item in countryOptions" | 
|  |  | :key="item.countryid" | 
|  |  | :label="item.countryid+'-'+item.countrydescchn" | 
|  |  | :value="item.countryid"> | 
|  |  | <span style="float: left">{{ item.countryid }}</span> | 
|  |  | <span style="float: right; color: #8492a6; font-size: 13px">{{ item.countrydescchn }}</span> | 
|  |  | </el-option> | 
|  |  | </el-select> | 
|  |  | </div> | 
|  |  | </template> | 
|  |  |  | 
|  |  | <script> | 
|  |  | import {selectCountry} from '../../api/transport' | 
|  |  |  | 
|  |  | export default { | 
|  |  | name: 'Nationality', | 
|  |  | props: { | 
|  |  |  | 
|  |  | }, | 
|  |  | data() { | 
|  |  | return { | 
|  |  | nationality: '', | 
|  |  | loading:false, | 
|  |  | countryOptions:[], | 
|  |  | countryid:'', | 
|  |  |  | 
|  |  | } | 
|  |  | }, | 
|  |  | // computed: { | 
|  |  | // }, | 
|  |  | // created() { | 
|  |  | // }, | 
|  |  | methods: { | 
|  |  | /*获取国籍*/ | 
|  |  | getCountry:function(query){ | 
|  |  | this.countryOptions=[]; | 
|  |  | let params={countryid:query}; | 
|  |  | this.loading = true; | 
|  |  | selectCountry(params).then(res =>{ | 
|  |  | if (res!=null) { | 
|  |  | console.log(res.data.data) | 
|  |  | setTimeout(() => { | 
|  |  | this.loading = false; | 
|  |  | this.countryOptions=res.data.data; | 
|  |  | }, 200); | 
|  |  | } else { | 
|  |  | this.countryOptions = []; | 
|  |  | } | 
|  |  |  | 
|  |  | }); | 
|  |  | }, | 
|  |  | selectChange:function(val){ | 
|  |  | console.log(val) | 
|  |  | this.$emit('tellFarther',val); | 
|  |  | } | 
|  |  | } | 
|  |  | } | 
|  |  |  | 
|  |  | </script> | 
|  |  |  | 
|  |  | <style scoped> | 
|  |  |  | 
|  |  | </style> | 
... | ... |  |