ElementUI2.0组件库el-table自定义表头下拉选择 表头筛选

 

使用render-header方法，且不使用jsx

实现效果

 

el-table模板中加render-header

          <el-table-column label="**" :render-header="renderSpecNameHeader">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.specName" placement="top" effect="light">
                <div style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"
                >{{scope.row.specName}}</div>
              </el-tooltip>
            </template>
          </el-table-column>

 模板中的方法

 //渲染**的tableheader
    renderSpecNameHeader(createElement, { column, $index }) {
      let self = this;

      //该列的绑定数据
      console.log(column);
      //列号
      console.log($index);

      return createElement(
        "div",
        {
          style: "display:flex;"
        },
        [
          createElement("div", {
            domProps: {
              innerHTML: column.label
            }
          }),
          createElement(SelectHeader, {
            style: "cursor: pointer;",
            // 组件 prop
            props: {
              type: "specId",
              options: self.specIdOptions, //下拉框选项
              defaultValue: self.specId, //默认值
              defaultProps: {
                value: "specId",
                label: "specName"
              }
            },
            // 事件监听器在 `on` 属性内，
            // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
            // 需要在处理函数中手动检查 keyCode。
            on: {
              selectChange: self.selectChange
              // click: this.clickHandler
            },
            // 仅用于组件，用于监听原生事件，而不是组件内部使用
            // `vm.$emit` 触发的事件。
            nativeOn: {
              // click: this.nativeClickHandler
            }
          })
        ]
      );
    },
    //选择框回调
    selectChange(){
       //写点啥吧
         
    }

SelectHeader.vue文件 

<template>
  <el-popover placement="bottom" width="180" trigger="click">
    <el-select
      v-model="value"
      placeholder="请选择"
      clearable
      @change="changeHandler"
    >
      <el-option
        v-for="item in options"
        :key="item[defaultProps.value]"
        :label="item[defaultProps.label]"
        :value="item[defaultProps.value]"
      ></el-option>
    </el-select>
    <div slot="reference">
      <i class="el-icon-arrow-down"></i>
    </div>
  </el-popover>
</template>

<script>
export default {
  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: {
    changeHandler() {
      let self = this;
      self.$emit("selectChange", { type: self.type, value: self.value });
    }
  }
};
</script>