有这样的数据:
data(){ return { saveBtnDisabled:false, courseInfo: { title: '', subjectId: '', //二级分类id subjectParentId: '',//一级分类id teacherId: '', lessonNum: 0, description: '', cover: '/static/01.jpg', price: 0 }, BASE_API: process.env.BASE_API,//接口API地址 subjectOneList: [], //一级分类数据 subjectTwoList: [], //二级分类数据 } },
结构(请先看下面的结构):
<el-form-item label="一级分类"> <el-select v-model="courseInfo.subjectParentId" placeholder="请选择" @change="getTwoSubject"> <el-option v-for="subject in subjectOneList" :key="subject.id" :label="subject.title" :value="subject.id" /> </el-select> <!-- 二级分类 --> <el-select v-model="courseInfo.subjectId" placeholder="请选择"> <el-option v-for="subject in subjectTwoList" :key="subject.value" :label="subject.title" :value="subject.id" /> </el-select> </el-form-item>
分析:
通过遍历下面
subjectOneList: [], //一级分类数据
来显示一级的下拉菜单的可选内容,当一级菜单选中一个时,即发生
@change="getTwoSubject"
事件时,会调用 getTwoSubject 方法来处理数据,得到二级分类数组,然后赋值给
subjectTwoList: [], //二级分类数据
来遍历显示。
用户选择信息后,会通过双向绑定数据到 courseInfo 对象中。直到提交都是没有问题的,但当我们进行数据的回显时,即我们通过接口获取到之前的 courseInfo 赋值到现在的 courseInfo
时,二级分类会出现只显示二级分类的id ,原因时,我们没有触发一级分类下拉菜单的change事件,所以二级分类无法显示对象的内容。所以我们需要让二级分类有一级分类对象的内容,这样框架才能
帮我们进行回显。
解决方法:
for(var i=0;i<this.subjectOneList.length;i++) {
//获取每个一级分类
var oneSubject = this.subjectOneList[i];
if(this.courseInfo.subjectParentId == oneSubject.id) {
this.subjectTwoList = oneSubject.children //关键点
}
}