ElementUI下拉框取消显示下拉选项并弹出对话框

工作有个需求，要将下拉框的选项隐藏，并点击下拉框弹出对话框来完成数据选择。

这是HTML部分

 <el-select
    filterable
    multiple
    placeholder="全部"
    collapse-tags
    v-model="item.wardSelect.display"
    value-key="value"
    @focus="openDialog('choose', index)"
    ref="choose"
>
   <el-option
       v-for="(option, optinIndex) in allTag"
       :key="option.tagID + 'option' + optinIndex"
       :label="option.tagName"
       :value="option.tagID"
   ></el-option>

主要是这个@focus，然后这下面是openDialog方法的实现

openDialog(ref, index) {
  // 判断这个ref是否是一个数组
  if (this.$refs[ref] instanceof Array) {
        this.$refs[ref][index].blur();
      } else {
        this.$refs[ref].blur();
      }
      if (!this.dialogVisible) {
        this.dialogVisible = true;
      }
}

网上找了一些文章，都是说直接通过$refs获取到组件后直接调用blur方法就可以了，但是我直接调用发现会报underfind错误，打印了一下这个ref，发现是个数组，后面别的地方也用到了这个方法，就会出现不是数组的情况，于是就有了这个判断，根据传进来的ref，判断一下是不是是数组，数组的话，因为是v-for遍历生成的，就把index传过来，将相应的el-select选项隐藏，不是数组的情况下就直接调用blur方法就行了。