select选择器联动过滤的问题

img


当我选择下拉框的时候,点击全部或者外部机构或者全部机构的时候,旁边机构的下拉框里面的值会发生变化,我应该怎么操作来实现,

img

我现在已经将所有医院的ID合并到一个数组中去了,this.cc

img


加一个change事件,当我选择外部机构的时候,显示的id为
![img](。其他的数据全部隐藏
当我选择全https://img-mid.csdnimg.cn/release/static/image/mid/ask/642716078146154.png "#left")
部机构的时候则为
![img](,其他的数据 全部隐藏
当我选择了全部的时候https://img-mid.csdnimg.cn/release/static/image/mid/ask/247326078146182.png "#left")
则为全部医院id,也就是this.cc

img

你如果用 select 来进行联动的话就是这样的一个逻辑

  <template>
    <div>
      demo1:
      <el-select v-model="value1" 
                 @change="change"
                 placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      demo2
      <el-select v-model="value2" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
  </template>

    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: '',
        value2:''
      }
    },
  methods:{
    change(data){
      console.log(data)
      if(data=='选项1'){
        this.value2 = '选项1'
      }else{
        this.value2 =''
      }
      
    }
  }

img


你是选完之后还有下一级要选择,可以采用级联选择器,比较方便,