el-select+vue使用

包含：

• el-select添加默認選項
• el-select選項被選中時對應顯示相應數據

html部分：

<el-select class="item-choose" v-model="value" size="small">
 <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"
></el-option>
</el-select>

js部分：

import {getNewLists, choiceOthers} from '../../../api/api' export default { data() { return { options: [{ value: '1', label: '蘋果' }, { value: '2', label: '香蕉' }, { value: '3', label: '山竹' }], value: '1' } }, methods:{ initAllList(){ getNewLists() .then((response) => { this.$emit('newsList',response.data); }) }, getlists(val){ console.log(val) if(val == 1){ getNewLists() .then((response) => { this.$emit('newsList',response.data); }) } else if(val == 2){ choiceOthers('zhiyou') .then((response) => { this.$emit('newsList',response.data); }) } else{ choiceOthers('others') .then((response) => { this.$emit('newsList',response.data); }) } }, }, watch: { "value": function (value) { this.getlists(value) }, }, created(){ this.initAllList() }, }

 initAllList()用來初始化頁面第一次載入時的data數據（我這裏的數據是由子組件傳遞到父組件的）。el-select選項被選中時對應顯示相應數據是由 watch監測value值的變化，並請求相應的後端接口來進行處理。　 有更好的寫法歡迎評論區指點~