包含:
- 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值的变化,并请求相应的后端接口来进行处理。
有更好的写法欢迎评论区指点~