elementUI 结合createElement自定义table头部筛选

用elementUI的table处理数据时经常要遇到筛选，但element官方对表格的筛选具有一定的局限性，所以自己结合createElement写了一个类似搜索的列筛选功能。如下图：

1.实现原理

利用elementUI自带render-header 表格列操作的属性

结合createElement 创建虚拟DOM。

2.具体实现代码

1.html代码

<el-table-column
        prop="name"
        label="名称"
        sortable
        :render-header="renderSpecNameHeader"
      >
      </el-table-column>

2.创建SelectHeader.vue组件

<template>
  <el-popover placement="bottom" width="200" trigger="click">
    <el-input
      placeholder="请输入内容"
      v-model="value"
      class="input-with-select"
      @keyup.enter.native="confirm"
    >
      <el-button slot="append" icon="el-icon-search" @click="confirm">
      </el-button>
    </el-input>
    
    <div slot="reference">
      <i class="el-icon-arrow-down"></i>
    </div>
  </el-popover>
</template>
 
<script>
export default {
  inject: ['reload'],
  data () {
    return {
      value: ""
    };
  },
  props: {
    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) {
      let self = this;
      self.value = newVal;
    },
  
  },
  methods: {

    confirm () {
      let self = this;
      self.$emit("selectChange", { type: self.type, value: self.value });
    },
  }
};
</script>

3.引入组件

import SelectHeader from "@/components/SelectHeader/SelectHeader";

4.渲染虚拟DOM并回调方法

//渲染**的tableheader
    renderSpecNameHeader(createElement, { column, $index }) {
      let self = this;
      //该列的绑定数据
      // console.log(column.label);
      //列号
      // console.log($index);
      return createElement(
        "div",
        {
          style: "display:inline-flex;"
        },
        [
          createElement("div", {
            domProps: {
              innerHTML: column.label
            }
          }),
          createElement(SelectHeader, {
            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
              // click: this.clickHandler
            },
            // 仅用于组件，用于监听原生事件，而不是组件内部使用
            // `vm.$emit` 触发的事件。
            nativeOn: {
              // click: this.nativeClickHandler
            }
          })
        ]
      );
    },
    //选择框回调
    selectChange(data) {
      // console.log('回调', data)
      // 自定义筛选框返回数据进行过滤添加到tableData数组中
      let type = data["type"];
      let value = data["value"];
      if (value !== "" && type !== "") {
        _self.tableData = _self.tableData.filter(item =>
          item[type]
            .toString()
            .toLowerCase()
            .includes(value.toString().toLowerCase())
        );
      } else {
        _self.getDeptListData();//重新请求数据源
      }
      _self.total = _self.tableData.length;
    },

以上步骤基本实现了自定义table头部筛选。