vue+elment+table动态表头render-header：多列渲染pop后点击显示只显示当前的pop

问题是这样的：在表头渲染一个按钮，点击会弹出当前列的搜索框pop,当点击第二列弹出pop时其余已经弹出的也不会消失。

就算绑定了点击此处以外消失的指令也没用：

那么怎么解决呢，通过实现发现，双击的时候是可以的，也就是@dblclick 但是通过点击改成了双击后出现搜索层肯定不理想，还是想通过单机点出pop然后再点击其它列的搜索旧的pop消失掉

这时候顺着事件触发思路既然能改事件触发那就改成

@mousedown即可

<div slot="reference" style="margin-left:5px;margin-top: 2px;" @mousedown.stop ="popClick" v-click-outside="closeOver">

代码：

父组件表单组件:

<!-- 服务店收货单管理 -->
<template>
  <div class="main">
    <el-card class="box-card">
      <div class="clearfix">
        <span class="card-title">服务店收货单管理</span>
      </div>
      <div class="text item">
        <el-table :data="tableData" @row-click="clickData" style="width: 100%">
          <el-table-column prop="name" label="作业订单" :render-header="renderSpecNameHeader"></el-table-column>
          <el-table-column prop="name" label="收货单号" :render-header="renderSpecNameHeader"></el-table-column>
          <el-table-column prop="name" label="订单日期" :render-header="renderSpecNameHeader"></el-table-column>
          <el-table-column prop="name" label="装箱日期" :render-header="renderSpecNameHeader"></el-table-column>
          <el-table-column prop="name" label="发货时间" :render-header="renderSpecNameHeader"></el-table-column>
          <el-table-column prop="name" label="出货历时" :render-header="renderSpecNameHeader"></el-table-column>
          <el-table-column prop="name" label="妥投时间" :render-header="renderSpecNameHeader"></el-table-column>
          <el-table-column prop="name" label="物流耗时" :render-header="renderSpecNameHeader"></el-table-column>
          <el-table-column prop="name" label="物流状态" :render-header="renderSpecNameHeader"></el-table-column>
          <el-table-column prop="name" label="需求量" :render-header="renderSpecNameHeader"></el-table-column>
          <el-table-column prop="name" label="未发行数" :render-header="renderSpecNameHeader"></el-table-column>
        </el-table>
      </div>
      <div class="task-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageindex"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import TableSelect from './tableSelect.vue'

export default {
  components: {
    TableSelect
  },
  data() {
    return {
      tableData: [{name: '11'}, {name: '22'}],
      tableDataCopy: [{name: '11'}, {name: '22'}],
      filters: [],
      pagesize: 10,
      pageindex: 1,
      total: 0,
    }
  },
  methods: {
    /** 表头搜索 */
    // 渲染**的tableheader
    renderSpecNameHeader (createElement, { column, $index }) {
      const self = this
      // 该列的绑定数据
      // console.log(column.label);
      // 列号
      // console.log($index);
      return createElement(
        'div',
        {
          style: 'display:inline-flex;'
        },
        [
          createElement('div', {
            domProps: {
              innerHTML: column.label
            }
          }),
          createElement(TableSelect, {
            style: 'cursor: pointer;',
            // 组件 prop
            props: {
              type: column.property,
              options: self.specIdOptions, // 下拉框选项
              defaultValue: self.examinerFieldChname, // 默认值
              defaultProps: {
                value: 'examinerFieldName',
                label: 'examinerFieldChname'
              }
            },
            // 事件监听器在 `on` 属性内，
            // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
            // 需要在处理函数中手动检查 keyCode。
            on: {
              selectChange: self.selectChange,
              resetChange: self.resetChange
              // click: this.clickHandler
            },
            // 仅用于组件，用于监听原生事件，而不是组件内部使用
            // `vm.$emit` 触发的事件。
            nativeOn: {
              // click: this.nativeClickHandler
            }
          })
        ]
      )
    },
    // 搜索回调
    selectChange (data) {
      console.log('搜索回调', data)
      // 自定义筛选框返回数据进行过滤添加到tableData数组中
      const type = data['type']
      const value = data['value']
      this.filters[type] = value
      if (value !== '' && type !== '') {
        this.tableData = this.tableData.filter(
          item => item[type].toString().toLowerCase().includes(value.toString().toLowerCase())
        )
      }
    },
    // 重置回调
    resetChange (data) {
      console.log('重置回调', data)
      delete this.filters[data['type']]
      var tmpData = this.tableDataCopy
      for (const key in this.filters) {
        tmpData = tmpData.filter(
          item => item[key].toString().toLowerCase().includes(this.filters[key].toString().toLowerCase())
        )
      }
      this.tableData = tmpData
    },
    
    clickData() {
      this.$router.push({ name:'orderDetail'})
    },
    // 分页
    handleSizeChange() {},
    handleCurrentChange() {},
  }
}
</script>

<style lang="less" scoped>
.main {
  .clearfix {
    margin-bottom: 20px;
    .card-title {
      font-size: 18px;
      font-weight: 500;
      color: #1E1F23;
    }
  }
  .task-page {
    padding: 0px @pd-16;
    text-align: right;
    padding-top: 16px;
    height: 48px;
  }
}
</style>

子组件：pop和出发点组件

<!-- 表头搜索组件 -->
<template>
  <el-popover placement="bottom" width="200" trigger="manual" v-model="visible" @show="showPopover">
    <el-input
      placeholder="请输入内容"
      v-model="value"
      clearable
      @keyup.enter.native="confirm"
      ref="sInput"
    >
    </el-input>
    <el-button type="primary" size="mini" @click="confirm" style="margin-top:5px;">搜索</el-button>
    <el-button size="mini" @click="resetData">重置</el-button>
    <div slot="reference" style="margin-left:5px;margin-top: 2px;" @mousedown.stop ="popClick" v-click-outside="closeOver">
    <!-- <div slot="reference" style="margin-left:5px;margin-top: 2px;" @dblclick.stop ="popClick" v-click-outside="closeOver"> -->
      <img src="../../../assets/songxia/icon-search.png" style="width: 12px;">
    </div>
  </el-popover>
</template>
<script>
export default {
  data () {
    return {
      value: '',
      visible: false,
      iconColor: false
    }
  },
  props: {
    tableType: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    defaultValue: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: function () {
        return []
      }
    },
    defaultProps: {
      type: Object,
      default: function () {
        return {
          label: 'label',
          value: 'value'
        }
      }
    }
  },
  watch: {
    defaultValue (newVal, oldVal) {
      const self = this
      self.value = newVal
    }
  },
  methods: {
    showPopover () {
      this.$nextTick(() => {
      this.$refs.sInput.focus()
      })
    },
    resetData () {
      console.log('reset')
      this.value = ''
      this.visible = false
      this.iconColor = false
      const self = this
      self.$emit('resetChange', { type: self.type, value: self.value, tableType: self.tableType })
    },
    closeOver () {

      this.visible = false
    },
    popClick (e) {
      e.stopPropagation()
      console.log(e)
      this.visible = !this.visible
    },
    confirm () {
      this.visible = false
      this.iconColor = true
      const self = this
      if (self.value) {
        self.$emit('selectChange', { type: self.type, value: self.value, tableType: self.tableType })
      }
    }
  },
  directives: {
    clickOutside: {
      bind (el, binding, vnode) {
        function clickHandler (e) {
          // 这里判断点击的元素是否是本身，是本身，则返回
          if (el.contains(e.target)) {
            return false
          }
          // 判断指令中是否绑定了函数
          if (binding.expression) {
            // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
            binding.value(e)
          }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = clickHandler
        document.addEventListener('click', clickHandler)
      },
      update () {},
      unbind (el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__)
        delete el.__vueClickOutside__
      }
    }
  }
}
</script>