二级联动用法

季布，

于 2021-09-01 13:39:57 发布

阅读量247

点赞数 4

分类专栏： element-ui Vue 文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_47906106/article/details/120036133

版权

Vue 同时被 2 个专栏收录

84 篇文章 16 订阅

订阅专栏

element-ui

17 篇文章 1 订阅

订阅专栏

该博客介绍了如何在Vue.js应用中实现下拉菜单的联动效果，特别是当一级选择项确定后，二级下拉框自动默认选中特定值，同时允许用户从二级下拉菜单中选择其他选项。通过`v-model`和`@change`事件监听，结合数据对象实现了这一功能，确保了双向数据绑定的正确性。

摘要由CSDN通过智能技术生成

需求：一级选中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]
        }
      }
    },

}