实现学段年级学科科目教材的联动效果。
实现的效果是：
点击小学下面年级就是小学所有的年级。点击初中年级就是初中年级。一次类推哦。点击年级以后科目又是该年级下面的科目。切换了年级科目也要改变。
也就是切换学段年级改变。年级改变了，科目也会改变。
我这个后台提供的接口教材是固定的没有联动效果，所以暂且可以不管教材。
看下面的接口数据。
接口数据：
"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知道选中值的下标，然后就直接可以通过下标知道他是数组下标了。