vue 动态实现两个select选择后，获取被选择行的数据

在使用 Element-UI Select组件时，遇到一个需求是根据内容来过滤选项，记录一下解决方案。

一、原理

1.实现原理就是select绑定change事件，然后在change绑定的获取选中后的数据，并且遍历到第二个option对应的数据集与被选择的数据id进行比较，从而实现点击第一个select里的数据后，第二个下拉菜单获取并显示，还可多选编辑，下面是代码部分，可看到效果。其实也比较简单，我就直接上代码啦，注释写的比较完整，就不过多解释啦，有不理解的地方可以留言哈：

一、代码块

1、标签部分

<template>
    <div>
        <div style="width: 500px;max-height: 65vh;overflow-y: auto">
          <el-form :model="addForm" :rules="rules" ref="addForm">
            <el-form-item label="喜欢" label-width="120px" prop="area">
              <el-select v-model="addForm.area" filterable placeholder="请选择喜欢的" value-key="addvcd"
                         @change="areaSelect">
                <el-option v-for="item in areaList" :key="item.addvcd" :label="item.addvnm" :value="item"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="喜欢范围" label-width="120px" prop="jurisdiction"><!---->
              <el-select v-model="addForm.jurisdiction" multiple=true filterable=true placeholder="请选择喜欢范围" value-key="addvcd">
                <el-option v-for="item in areaListNext" :key="item.addvcd" :label="item.addvnm" :value="item.addvcd"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
    </div>
</template>

2、变量部分

<script>
        data(){//变量
          return{
            guanliRelation:{
              "10000":"10000,10001",
              "10002":"10002,10003,10004",
            },
            viewList:[
              {test:"《爱》-小虎队",id:"10000"},
              {test:"《夜空中最亮的星》-逃跑计划",id:"10001"},
              {test:"《朝花夕拾》-冰心",id:"10002"},
              {test:"《海底两万里》-海明威",id:"10003"},
              {test:"《格林童话》-安徒生",id:"10004"},
            ],
            area:[],
            jurisdiction:[],
            areaList:[],
            areaListNext:[],
            addForm:{
              area:'',
              test:'',
              id:'',
              jurisdiction: '',
            },

          }
        },
</script>

3、事件部分

<script>
    methods:{ //事件
      areaSelect(item){
         let _self = this;
         _self.addForm.test = item.test;
         _self.addForm.id = item.id;
         _self.addForm.jurisdiction=[];
         let list=_self.guanliRelation[_self.addForm.id];
         list=list.split(",");  //以逗号分割去字符串
         console.log(list);
         for(let prop in list){
              _self.addForm.jurisdiction.push(list[prop]);
         }
      }
   },
</script>

4、mounted初始化，获取数据

<script>
    mounted(){ //初始化
          let _self = this;
          let temp=JSON.parse(JSON.stringify(this.viewList));
          let temp2=JSON.parse(JSON.stringify(this.viewList));
          _self.areaListNext = temp;
          _self.areaList = temp2;
          console.log(this.viewList);
    }
</script>

三、查看效果

效果图.png 效果图.png 效果图.png

如有不对的地方，大佬可以指出！ฅ( ̳• ·̫ • ̳)