實現學段年級學科科目教材的聯動效果。
實現的效果是：
點選小學下面年級就是小學所有的年級。點選初中年級就是初中年級。一次類推哦。點選年級以後科目又是該年級下面的科目。切換了年級科目也要改變。
也就是切換學段年級改變。年級改變了，科目也會改變。
我這個後臺提供的介面教材是固定的沒有聯動效果，所以暫且可以不管教材。
看下面的介面資料。
介面資料：
"bookletlist":["人教版上冊","人教版下冊"]}
{"studysectionlist":[{"studysection":"小學",
"gradelist":[{"grade":"一年級","subjectlist":["語文","數學","英語"]},
{"grade":"二年級","subjectlist":["語文","數學","英語"]},
{"grade":"三年級","subjectlist":["語文","數學","英語"]},
{"grade":"四年級","subjectlist":["語文","數學","英語"]},
{"grade":"五年級","subjectlist":["語文","數學","英語"]},
{"grade":"六年級","subjectlist":["語文","數學","英語"]}]},
{"studysection":"初中",
"gradelist":[{"grade":"七年級","subjectlist":["語文","數學","英語","生物","歷史","地理","思想品德"]},
{"grade":"八年級","subjectlist":["語文","數學","英語","物理","生物","歷史","地理","思想品德"]},
{"grade":"九年級","subjectlist":["語文","數學","英語","物理","化學","歷史","思想品德"]}]},
{"studysection":"高中",
"gradelist":[{"grade":"高一","subjectlist":["語文","數學","英語","物理","化學","生物","歷史","地理","思想政治"]},
{"grade":"高二","subjectlist":["語文","數學","英語","物理","化學","生物","歷史","地理","思想政治"]},
{"grade":"高三","subjectlist":["語文","數學","英語","物理","化學","生物","歷史","地理","思想政治"]}
]}],
如果上面的結構看的不清楚。可以在在network裡面展開看整體的資料
分析資料：
我們可以畫個圖來看資料
booklist是教材版本。可以直接取出來。
studysectionlist這個裡面分為兩個陣列，一個studysection學段，一個gradelist。而gradelist這個有分成了兩個陣列。年級和科目
下面就是我的程式碼部分
<template>
<div class="list">
<el-form label-width="80px">
<el-form-item label="學段" >
<el-button type="primary"
v-for="(items , key) in studysectionlist"
:key="key"
@click="toggle(key,items)"
:class="{ active:key==active}" plain>{{items.studysection}}</el-button>
</el-form-item>
<el-form-item label="年級">
<el-button type="primary"
v-for="(items , key) in gradelist"
:key="key"
@click="toggle1(key,items)"
:class="{ active:key == active11}" plain>{{items.grade}}</el-button>
</el-form-item>
<el-form-item label="科目">
<el-button type="primary"
v-for="(items , key) in subjectlist"
:key="key"
@click="toggle2(key,items)"
:class="{ active:key == active22}" plain>{{items}}</el-button>
</el-form-item>
<el-form-item label="教材">
<el-button type="primary"
v-for="(items , key) in bookletlist"
:key="key"
@click="toggle3(key,items)"
:class="{ active:key == active33}"
plain>{{items}}</el-button>
</el-form-item>
</el-form>
<el-button @click="get()">獲取資料</el-button>
</div>
</template>
<script>
import {getChapterSubjectList} from '../../api/api';
export default {
data() {
return {
studysectionlist:[],//學段
active:0,//選中的學段的下標
gradelist:[],//年級
active11:0,//選中的年級下標
subjectlist:[],//科目
active22:0,//選中的科目下標
bookletlist:[], //版本
active33:0,//選中的版本下標
studysection:'',
grade:'',
subject:'',
booklet:'',
flag:true,
}
},
methods: {
//如果有預設的年級學科
getDefault(){
this.studysection='初中',
this.grade='八年級';
this.subject='地理';
this.booklet='人教版';
this.flag=false;
},
//獲取年級學科
getchaptersubjectlists(){
this.listLoading = true;
getChapterSubjectList().then( res => {
this.studysectionlist=res.data.studysectionlist;
this.gradelist=this.studysectionlist[this.active].gradelist;
this.subjectlist=this.gradelist[this.active11].subjectlist;
this.bookletlist=res.data.bookletlist;//版本一下子搞定
alert(JSON.stringify(res.data));
if(this.flag){//初始化選中的第一個
this.studysection=this.studysectionlist[this.active].studysection,
this.grade=this.gradelist[this.active11].grade;
this.subject=this.subjectlist[this.active22];
this.booklet=this.bookletlist[this.active33];
}else{//有預設值選中的是預設值
for(var i=0;i<this.studysectionlist.length;i++){
if(this.studysectionlist[i].studysection==this.studysection){
this.active=i;//每次active一變，下面的陣列也會變化。所以要從新呼叫
this.changeChosed();
}
}
for(var i=0;i<this.gradelist.length;i++){
if(this.gradelist[i].grade==this.grade){
this.active11=i;
this.changeChosed();
}
}
for(var i=0;i<this.subjectlist.length;i++){
if(this.subjectlist[i]==this.subject){
this.active22=i;
this.changeChosed();
}
}
for(var i=0;i<this.bookletlist.length;i++){
if(this.bookletlist[i]==this.booklet){
this.active33=i;
this.changeChosed();
}
}
}
})
},
toggle(key,$e){//點選學段
this.active = key;
this.active11=0;
this.studysection=$e.studysection;
this.changeChosed();
},
toggle1(key,$e){//點選年級
this.active11 = key;
this.active22=0;
this.grade=$e.grade;
this.changeChosed();
},
toggle2(key,$e){//點選科目
this.active22 = key;
this.subject=$e;
this.changeChosed();
},
toggle3(key,$e){//點選教材
this.active33 = key;
this.textbook=$e;
this.changeChosed();
},
//操作以後陣列改變取到對應的值
changeChosed(){
this.gradelist=this.studysectionlist[this.active].gradelist;
this.subjectlist=this.gradelist[this.active11].subjectlist;
},
get(){
console.log( this.studysection);
console.log( this.grade);
console.log( this.subject);
console.log( this.booklet);
},
},
mounted() {
this.getDefault();//編輯頁面時獲取已有值
this.getchaptersubjectlists();
},
components: {
},
watch:{
},
}
</script>
<style>
.multiplyAnswers input.el-input__inner {
border: none;
border-radius: 0px;
border-bottom: 1px solid #dcdfe6;
padding:0px;
width: 120px;
}
.ql-editor.ql-blank:before{font-style: normal;font-size:14px}
.text-center{text-align:center;}
.edui-default .edui-box{line-height:22px}
</style>
<style scoped>
.list{margin-top:30px;width:90%;}
button.el-button.el-button--primary.is-plain.active{ color: #fff; background-color: #409EFF; border-color: #409EFF;}
.multiplyAnswers{display:inline-block;width:70px;margin-right:10px;border:none;}
.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover{background: #fff; border-color: #409EFF; color: #409EFF;}
.el-icon-delete{cursor:pointer;padding-left: 5px;line-height:40px;}
.addKnowledge{width:100px;}
.chapters{padding-right:20px;}
.chapters:hover .el-icon-delete{color:red;}
.el-icon-success{font-size:30px;color:#3E8CEB;padding:10px 0; margin-top: 50px;}
.finishbtn{margin-top:50px}
</style>
重點：
1.因為是聯動的每次點選的時候，active的值改變。聯動的那些陣列的值就相應的改變。所以一定要寫changeChosed()這個函式用來從新取陣列的。
2.如果有預設值顯示預設值，如果沒有預設選中的是第一個。所以加了一個flag變數用來判斷是否有預設值的。
必須通過迴圈陣列來獲取到預設值的下標，這樣頁面那個按鈕變成藍色的選中的樣式。如果僅僅是知道了值那個下標不變，頁面顯示的選中還是第一個的。
3.獲取預設值的函式一定要寫在獲取陣列之前。但是獲取下標的方法一定要寫在有了資料之後。所以你不能在獲取預設值的時候獲取下標。
4.通過ative active11 active22 active33知道選中值的下標，然後就直接可以通過下標知道他是陣列下標了。