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

需求：

选择用工形式后，薪资才出现内容。薪资的内容随着用工形式的选择发生变化。
当清除薪资中的内容时，用工形式的内容不会被清除；当清除用工形式中的内容时，薪资中的内容也会被随着清除；

代码实现：

<div class="work-condition1">
            <span class="condition-type1"
              >用工形式：
              <span>
                <el-select v-model="configForm.ygxs" placeholder="请选择" @change="subjectLevelOneChanged" clearable @clear="delValue">
                  <el-option
                    v-for="subject in subjectOneList"
                    :key="subject.id"
                    :label="subject.title"
                    :value="subject.id"/>
                </el-select>
              </span>
            </span>
            <span class="condition-type1">薪资：
              <!-- 二级分类 -->
              <el-select v-model="configForm.xc" clearable placeholder="请先选择用工形式" @change="selectXc">
                <el-option
                  v-for="subject in subjectTwoList"
                  :key="subject.value"
                  :label="subject.title"
                  :value="subject.id"/>
              </el-select>
            </span>
          </div>

注意： 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.jb51.net/article/227005.htm