封装了el-table自定义表头支持下拉框检索，采用了el-popover组件，发现页面诡异了，详情看下图：

第一步：定义visible,控制popver显示和隐藏

第二步：下拉框追加事件@visible-change

第三步：popover组件追加事件@hide

<template>
<el-popover ref="popover" placement="bottom" width="180" trigger="hover" v-model="visible"
                @hide="hideFn">
      <div style="display: flex;">
        <el-select
          v-model="inputVal"
          placeholder="请选择"
          filterable
          clearable
          multiple
          size="mini"
          ref="selectRef"
          @visible-change="selectVisibleChange"
        >
          <el-option
            v-for="(item,index) in list"
            :key="index"
            :label="item.text"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div slot="reference">
        <i class="el-icon-arrow-down"></i>
      </div>
    </el-popover>
</template>
<script>
export default {
  data() {
    return {
      inputVal:'',
      visible:false,
      selectShow:false
    }
  },
  methods:{
    hideFn(){
      // 下拉框出现时候，让popover也一直显示，这样下拉框的选项不会漂浮到其他地方去
      if(this.selectShow){
        this.visible = true
      }
    },
    // 下拉框出现/隐藏时候触发。出现true 隐藏false
    selectVisibleChange(e){
      this.selectShow = e
    }
  }
}
</script>