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

 

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

实现效果

 

el-table模板中加render-header

 模板中的方法

 //渲染**的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文件