需求：
1：頭部導航欄中'XXXX'標題欄署恍，顯示下拉菜單
2：選中下拉菜單數(shù)據(jù)，將數(shù)據(jù)回顯到頁面指定位置
3：點擊回顯處數(shù)據(jù)却妨，調(diào)用接口饵逐，并請求數(shù)據(jù)，將數(shù)據(jù)回顯
由于 頭部標題欄彪标，回顯數(shù)據(jù)位置梳毙，以及點擊回顯后調(diào)用接口都不在同一個vue文件內(nèi)，所以使用到了Vuex
上代碼：
// 動態(tài)頭部導航欄
// 樣式我就不寫了捐下，大家根據(jù)自己需求調(diào)一下
// 顯示下拉菜單.vue 自己取名字哈
<template>
<!-- 1：頭部導航欄中'XXXX'標題欄账锹，顯示下拉菜單萌业，選中后隱藏 -->
<div id="headerMenu">
<div class="headerData">
<div class="card"
@click="change(item,index)"
v-for="(index,item) in fliterheaderData"
:key="index"
>
<span>{{item.name}}</span>
</div>
<div class="selectData" v-show="showSelectFlag">
<ul>
<li
@click="selectItem(item,index)"
v-for="(index,item) in selectData"
:key="index">{{item.name}}</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
fliterheaderData:[{name:'標題1',id:1},{name:'標題2',id:2},{name:'標題3',id:3}],
selectData:[{name:'選項1',id:1},{name:'選項2',id:2},{name:'選項3',id:3}]
},
methods: {
//提交下拉框數(shù)據(jù)
selectItem(item,index){
this.$store.commit('SET_SELECT',item.name);
//如果需求和我一樣，選中之后奸柬，下拉框就關(guān)閉
this.showSelectFlag = false
}
},
}
</script>
// vuex-----index.js頁面 名字隨便取
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
export default new Vuex.Store({
state:{
selectDataItem:""
},
mutations:{
SET_SELECT(state,selectDataItem){
state.selectDataItem = selectDataItem
}
},
actions:{
stateSelect({commit},selectDataItem){
commit('SET_SELECT',selectDataItem)
}
}
})
//選中下拉菜單數(shù)據(jù)生年，將數(shù)據(jù)回顯到頁面指定位置
// 2.vue
<template>
<div>
<el-select v-model="value" placeholder="請選擇">
<el-option
v-for="item in selectList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template>
<script>
import {mapActions} from 'vuex'
export default {
computed:{
selectList(){
// 因為我的需求，回顯的位置廓奕，除了選中的數(shù)據(jù)抱婉，還有兩個內(nèi)容（回顯的位置是一個下拉框）
let selectArr = [this.$store.state.selectDataItem,"數(shù)據(jù)1","數(shù)據(jù)2"]
selectArr.concat(this.oldArr)
return selectArr
}
},
data() {
return {
oldArr:[]
};
},
methods: {
...mapActions(['selectDataItem'])
},
};
</script>
到上面為止，數(shù)據(jù)就顯示成功了;
下面是額外的需求桌粉，一般情況下用不到
// 點擊回顯處數(shù)據(jù)蒸绩，調(diào)用接口，并請求數(shù)據(jù)铃肯，將得到的數(shù)據(jù)渲染
//首先患亿，回顯數(shù)據(jù)的位置是下拉框第一個 是不會變的
//所以首先根據(jù)下標判斷位置
if(index === 0){
//判斷選中的回顯數(shù)據(jù)是哪個
if(this.$store.state.selectDataItem === '選項1'){
//調(diào)用接口
}
if(this.$store.state.selectDataItem === '選項2'){
//調(diào)用接口
}
if(this.$store.state.selectDataItem === '選項3'){
//調(diào)用接口
}
}
希望對小伙伴們有些幫助，明天就是五一了押逼，祝大家步藕，節(jié)日愉快~
