需求:一级选中type后二级assignee会默认选中对应的值,而且二级的assignee下拉框还有有很多其他选项(负责的人),也就是说type选中后它的二级不仅可以选中默认的值,也可以再选其他的选项。第一级选中会确定二级选项,而二级选中不会影响一级
<el-form :model='ticketform' :inline='true' :rules="rules" ref="newTicket" label-position="right">
<el-form-item label="Type" style="margin-left:100px" required>
<el-select v-model="ticketform.type" placeholder="请选择" @change="changeSelect()">
<el-option
v-for="(item,index) in Newticket_Type"
:key="index"
:label="item"
:value="item"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Assignee" style="margin-left:100px" required>
<el-select v-model="ticketform.assignee" placeholder="请选择">
<el-option
v-for="(item1,index1) in ass_options"
:key="index1"
:label="item1"
:value='item1'
>
</el-option>
</el-select>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ticketform:{
type:'',
assignee:'',
},
typeoptions:[],
ass_options:['yihui.hu', 'nina.leng', 'blake.zhu', 'shanshan.bian', 'chun.li', 'young.yu', 'panda.luo', 'peng.yang', 'qingqing.he'],
Newticket_Type:['ReviewBoard', 'CQ-SPCSS', 'ART', 'Opengrok', 'Gerrit', 'Gitolite', 'U-Clearcase', 'Verify', 'GIT', 'SVN', 'BM', 'Covertiy', 'Git', 'Bugzilla'],
data1:{'Bugzilla': ['yihui.hu'], 'CQ-SPCSS': ['yihui.hu'], 'U-Clearcase': ['yihui.hu'], 'ART': ['nina.leng'], 'Covertiy': ['panda.luo'], 'Git': ['chun.li'], 'Gerrit': ['panda.luo'], 'Gitolite': ['panda.luo'], 'BM': ['young.yu'], 'GIT': ['panda.luo'], 'Opengrok': ['panda.luo'], 'Verify': ['panda.luo'], 'ReviewBoard': ['panda.luo'], 'SVN': ['qingqing.he']}
},
methods{
// newticket 下拉框两级联动
changeSelect(){
// 清空assignee内容
// this.ticketform.assignee = ''
// 遍历type下拉选项数组
for (const k in this.Newticket_Type){
//type内容是否等于assignee下拉中的某一项
if (this.ticketform.type===this.Newticket_Type[k]){
this.typeoptions = this.data1[this.ticketform.type]
// 第一个下拉框选中后,对应第二个默认选中
this.ticketform.assignee = this.typeoptions[0]
}
}
},
}
这里最重要的是要搞懂双向绑定的概念,