ElementUI框架 el-input和el-select组件失焦问题

el-input，el-select添加filterable属性后,如果都是打开一个弹窗页面，这两个组件的焦点事件并没有取消，就会出现如下问题（就是选择的下拉框会和弹窗同在一个z-index上，都是因为没有失焦引起的，Bug重现步骤：el-select添加filterable属性，选择值后，并打开弹窗，此时下拉款还没出现，当你在同浏览器切屏刷新任何一个页面时，再回来当前页面，这时下拉框会重新打开，出现了下图的Bug）

解决方案：

在组件上添加ref="select"方便获取组件，以及事件@visible-change="visibleChange"。1

添加方法：

//html:

 <el-form-item label="input输入框" prop="str1">
        <el-input
          type="text"
          v-model.trim="addForm.str1"
          placeholder="输入内容"
          style="width:100%;"
          clearable
          @focus="selectTable"
          ref="input"    //这里很重要
        ></el-input>
      </el-form-item>
      <el-form-item label="下拉选择框" prop="str1">
        <el-select
          v-model="addForm.str1"
          placeholder="请选择"
          filterable
          @change="selectTable"
          @visible-change="visibleChange"
          ref="select"  //这里很重要
          style="width:100%;"
        >
          <el-option
            v-for="item in accountTypelist"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

//script:
data(){
return{
   addForm: {
        str1: ""
      },
   accountTypelist: [
        { id: 0, name: "选项0" },
        { id: 1, name: "选项1" },
        { id: 2, name: "选项2" },
        { id: 3, name: "选项3" }
      ],
}
}

  methods: {
    selectTable() {
    //   this.$refs.input.blur();    input加上这句 (记得在组件加上ref属性)
      this.editDialog = true;
    },
    visibleChange(flag) {    //el-select加上这个(记得在组件加上ref属性)
      if (flag) {
        this.$refs.select.focus();
      } else {
        this.$refs.select.blur();
      }
    }
 }