el-table表头增加筛选条件

使用 :render-header 属性，渲染表头实现列表筛选功能。 首先定义一个selectHeader的子组件，利用render写法，将表头渲染到table里。

//selectHeader 组件
<template>
  <el-popover ref="selectHeaderRef" class="select-header" placement="bottom" width="220" trigger="manual" v-model="visible" @show="showPopover">
    <el-input :placeholder="placeholder" v-model="value" clearable @keyup.enter.native="confirm" ref="inputValueRef"> </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="display: flex; align-items: center" @click.stop="popClick" v-click-outside="closeOver">
      <span :style="{ color: isConfirm ? '#3C6AF6' : '' }" v-if="title"> {{ title }}</span>
      <span style="height: 16px">
        <svg aria-hidden="true" class="svg-icon" style="color: rgb(153, 153, 153); font-size: 22px; cursor: pointer; width: 16px; height: 16px">
          <use xlink:href="#icon-filtrate"></use></svg
      ></span>
    </div>
  </el-popover>
</template>

<script>
export default {
  inject: ['reload'],
  data() {
    return {
      value: '',
      visible: false,
      isConfirm: false
    }
  },
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    defaultValue: {
      type: String,
      default: ''
    }
  },
  watch: {
    defaultValue(newVal, oldVal) {
      const self = this
      self.value = newVal
    }
  },
  methods: {
    showPopover() {
      this.$nextTick(() => {
        this.$refs.inputValueRef.focus()
      })
    },
    resetData() {
      this.value = ''
      this.visible = false
      this.isConfirm = false
      const self = this
      self.$emit('resetChange', { value: self.value, type: self.type })
    },
    closeOver() {
      this.value = ''
      this.visible = false
    },
    popClick(e) {
      // e.stopPropagation()
      this.visible = !this.visible
    },
    confirm() {
      this.visible = false
      const self = this
      if (self.value) {
        self.$emit('selectChange', { value: self.value, type: self.type })
        this.isConfirm = true
      }
      this.value = ''
    }
  },
  directives: {
    clickOutside: {
      bind(el, binding, vnode) {
        function clickHandler(e) {
          if (el.contains(e.target)) {
            return false
          }
          // 判断指令中是否绑定了函数
          if (binding.expression) {
            binding.value(e)
          }
        }
        el.ClickOutSide = clickHandler
        document.addEventListener('click', clickHandler)
      },
      unbind(el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.ClickOutSide)
        delete el.ClickOutSide
      }
    }
  }
}
</script>
<style scoped></style>

父组件的使用部分：

<el-table-column
    align="center"
    prop="logisticCompanyName"
    width="165"
    :render-header="renderHeader">
</el-table-column>

 renderHeader(h, { column }) {
      const self = this
      return h(
        'span',
        {
          style: 'display:inline-flex;cursor: pointer'
        },
        [
          h('span', column.label),
          h(SelectHeader, {
            style: 'cursor: pointer;',
            // 给组件传值
            props: {
              title: '物流公司',
              placeholder: '输入物流公司，支持模糊搜索',
              type: 'logisticCompanyName'
            },
            on: {
              selectChange: self.selectChange,
              resetChange: self.resetChange
            },
            nativeOn: {
            }
          })
        ]
      )
    },

selectChange(data){
    // 筛选的回调
},
resetChange(data){
    // 重置的回调
}