vue框架element-ui源码修改之select点击无法隐藏

修改源码请先看这篇文章https://www.jianshu.com/p/f39dcce1d5b3

前言：当同时使用select里面的multiple 和 filterable 这两个属性的时候，发现select框框无法收起下拉选项，只能点击空白区域才能收起。
然后看了下源码，参数太多了一脸懵逼，项目比较赶，也没时间仔细研究各个参数，为了解决bug，就强行改了一些东西。首先找到并打开这个文件夹element-dev\packages\select\src下的select.vue,发现由这个函数控制的显示隐藏toggleMenu；

image.png

然后我改成了这样：

toggleMenu() {
        if (!this.selectDisabled) {
          if (this.multiple && this.filterable) {
            this.visible = !this.visible;
          } else {
            if (this.menuVisibleOnFocus) {
              this.menuVisibleOnFocus = false;
            } else {
              this.visible = !this.visible;
            }
          }
          if (this.visible) {
            (this.$refs.input || this.$refs.reference).focus();
          }
        }
      },

为了不影响原来的逻辑，我做了个判断，当this.multiple && this.filterable 都是true的时候，每次点击都强行改变visible 这个值，不考虑menuVisibleOnFocus 这个参数干嘛的。（ps：他里面有个watch是监听visible的，所以我们只用改变visible，其它不用管）。改完后点击右边图标能收起来了，但是点击input中间那一大块区域的时候还是没效果，发现是这个导致的flex-grow:1,直接在当前页面找到这个属性，然后强行修改当multiple 和 filterable 都存在的时候，不加这个属性：
改之前是这样的：

image.png
然后我们把这个属性放在computed里面去，修改如下：
image.png
然后在computed里面增加styleObj:

styleObj() {
        let obj = { width: this.inputLength / (this.inputWidth - 32) + '%', 'max-width': this.inputWidth - 42 + 'px' };
        if (!this.multiple) {
          obj['flex-grow'] = '1';
        }
        return obj;
      }

最后问题就这样很粗暴的解决了，各位看官有更好的方案，求提供！

！！！如果修改了上面这个flex-grow:1，就会出现不能输入了，所以不能这么改，只能给input增加点击事件（不建议修改）
（后面发现）如果multiple和filterable同时存在可以使用远程搜索。就不会出现上面的问题了，所以上面改那么多，都不如加上远程搜索，我后面也改了......之所以没有删掉这篇文章，就是看在写那么多字不想删

                <el-select class="w100"
                    v-model="formData.refuse_id"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="remoteMethod"
                    :loading="loading">
                    <el-option
                        v-for="item in rubbishArr"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>

-------

    remoteMethod(query) {
            let me = this;
            if(!me.hasCheckedCity){
                return;
            }

            if (query !== '') {
                this.loading = true;
                me.$ajax.get('/refuse/refuse',{title:query,city_id:me.localCity,status:1})
                .then(res=>{
                    this.loading = false;
                    let arr = [];
                    if(me.$commonFun.canForEach(res.list)){
            
                        res.list.forEach((v,i)=>{
                            arr.push({
                                id : v.id,
                                name : v.title
                            })
                        })
                    }
                    me.rubbishArr = [...arr];
                })
            } else {
                me.rubbishArr = [];
            }
        },

另外，题外话，修改源码的时候里面eslint校验超级严格，少一个分号空格都会报错，当心！