【vue】实现单选框二级联动

本是古典何须时尚 2023-09-27 08:16 41阅读 0赞

### 需求： ###

选择用工形式后，薪资才出现内容。薪资的内容随着用工形式的选择发生变化。  
当清除薪资中的内容时，用工形式的内容不会被清除；当清除用工形式中的内容时，薪资中的内容也会被随着清除；  
![在这里插入图片描述][0f170dd0c6334fea8201d28ca642f7e5.png]

### 代码实现： ###

**注意：** el-selec中的clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。所以需要使用@clear事件进行联动清除；

### return中的数据装配： ###

return {
        
        subjectOneList: [
            {
        
              "id": "10",
              "title": "全职",
              "children": [
                {
        
                  "id": "0-3000",
                  "title": "3K以下"
                },
                {
        
                  "id": "3000-5000",
                  "title": "3-5K"
                },
                {
        
                  "id": "5000-10000",
                  "title": "5-10K"
                },
                {
        
                  "id": "10000-15000",
                  "title": "10-15K"
                },
                {
        
                  "id": "15000-20000",
                  "title": "15-20K"
                },
                {
        
                  "id": "20000-30000",
                  "title": "20-30K"
                },
                {
        
                  "id": "30000-50000",
                  "title": "30-50K"
                },
                {
        
                  "id": "50000",
                  "title": "50K以上"
                }
              ]
            },
            {
        
              "id": "20",
              "title": "兼职",
              "children": [
                {
        
                  "id": "30-50",
                  "title": "30-50"
                },
                {
        
                  "id": "50-100",
                  "title": "50-100"
                },
                {
        
                  "id": "100",
                  "title": "100以上"
                }
              ]
            },
            {
        
              "id": "30",
              "title": "临时工",
              "children": [
                {
        
                  "id": "30-50",
                  "title": "30-50"
                },
                {
        
                  "id": "50-100",
                  "title": "50-100"
                },
                {
        
                  "id": "100",
                  "title": "100以上"
                }
              ]
            },
            {
        
              "id": "40",
              "title": "小时工",
              "children": [
                {
        
                  "id": "30-50",
                  "title": "30-50"
                },
                {
        
                  "id": "50-100",
                  "title": "50-100"
                },
                {
        
                  "id": "100",
                  "title": "100以上"
                }
              ]
            },
          ],
          subjectTwoList: []
    }

### methods方法： ###

methods: {
        
        // 点击清空按钮时触发
        delValue() {
        
          this.configForm.ygxs=''
          if(this.configForm.xc != ''){
        
            this.configForm.xc=''  //调用数据的方法的入参赋值
            this.subjectTwoList='' //调用数据的方法的入参赋值
            this.getData() //调用数据的方法
          }
        },
        subjectLevelOneChanged(value){
        
          //value就是一级分类的id值
          //先遍历所有的分类 里面包含一级和二级
          for (var i = 0; i <this.subjectOneList.length; i++) {
        
            //每个一级分类
            var oneSubject=this.subjectOneList[i]
            //判断：所有一级分类id和点击一级分类id是否一样
            if(value===oneSubject.id){
         //===即比较值 还要比较类型
            //从一级分类中获取所有的二级分类
            this.subjectTwoList=oneSubject.children
            //把二级分类Id值清空
            this.configForm.xc=''
            }
          }
          this.configForm.ygxs = value //调用数据的方法的入参赋值
          this.getData() //调用数据的方法
        },
        selectXc(val){
                
          this.configForm.xc = val //调用数据的方法的入参赋值
          this.getData() //调用数据的方法
        }
    }

联动清空参考链接：[https://www.cnblogs.com/joe235/p/13637587.html][https_www.cnblogs.com_joe235_p_13637587.html]  
数据装配、选择联动参考链接：[https://www.jb51.net/article/227005.htm][https_www.jb51.net_article_227005.htm]

[0f170dd0c6334fea8201d28ca642f7e5.png]: https://img-blog.csdnimg.cn/0f170dd0c6334fea8201d28ca642f7e5.png
[https_www.cnblogs.com_joe235_p_13637587.html]: https://www.cnblogs.com/joe235/p/13637587.html
[https_www.jb51.net_article_227005.htm]: https://www.jb51.net/article/227005.htm