刚开始的配制如下:
<el-form-item label="所属分类">
<el-select v-model="courseInfo.subjectParentId" @change="firstChange"
placeholder="请选择一级分类">
<el-option
v-for="item in oneList"
:key="item.id"
:label="item.title"
:value="item.id"
></el-option>
</el-select>
<el-select v-model="courseInfo.subjectId" placeholder="请选择二级分类">
<el-option
v-for="item in twoList"
:key="item.id"
:label="item.title"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
firstChange(value) {
this.courseInfo.subjectId = ''
for(let i=0;i< this.oneList.length;i++){
const oneSubject = this.oneList[i]
if(oneSubject.id === value){
this.twoList = oneSubject.children
}
}
}
data() {
return {
courseInfo: {},
oneList: [],
twoList: []
}
},
结果就是二级选择器里面有值,但是点击后选择框label 没有变更,或者label框变成了个id值,去掉
this.courseInfo.subjectId = ''
这一句,又没办法把二级选择器的上一次选择值取消,很诡异!
搞了好久,才发现给form对象属性添加上初始值就好了,因为没有属性初始值也能保存数据发送后台,所以偷懒没有初始化属性值,结果就出现了这异常。
初始化属性值就回到正规了:
courseInfo: {
title: "",
subjectId: "",
subjectParentId: "",
teacherId: "",
lessonNum: 0,
description: "",
cover: "",
price: 0
},