标签:包含 The import 数据 slist ceo 请求 接口 from
包含:
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值的变化,并请求相应的后端接口来进行处理。
有更好的写法欢迎评论区指点~
标签:包含 The import 数据 slist ceo 请求 接口 from
原文地址:https://www.cnblogs.com/zhaotq/p/9308882.html