ElementUI自定义表头 :render-header

表格的定义

<el-table :data="tableLogData" style="width: 100%" header-cell-class-name="header-cell-color">
        <el-table-column  prop="level" min-width="100"  :render-header="renderHeader"></el-table-column>
</el-table>

renderHeader方法---基础

    renderHeader(h, { column, $index }) {

      return h("div", {

        attrs: {

          class: "cell" //ele原来样式

        },

        domProps: {

          innerHTML: '<span class="red">* </span>' + column.label

        }

      });

    },

 

renderHeader方法---添加checkbox

renderHeader(h, { column }) {
      return h("span", [
        h("span", column.label),
        h("el-checkbox", {
          style: "margin-left: 5px;",
          on: {
            change: this.change
          }
        })
      ]);
    },
   change(val) {
      console.log(val);
    }

renderHeader方法---添加select

 renderHeader(h, { column }) {
//下拉框选项
      let filters = [
        { text: "全部", value: "全部" },
        { text: "INFO", value: "INFO" },
        { text: "WARN", value: "WARN" },
        { text: "ERROR", value: "ERROR" }
      ];

      //下拉框内容包裹在一个div里面
      return h(
        "div",
        {
          style: {
            height: "56px"
          }
        },
        [
          h(
            "span",
            {
              //div里面有一个文字提示：下拉框所属内容
              style: {},
              class: "level-font-class"
            },
            "日志级别"
          ),
          h(
            "el-select",
            {
              //el-select实现下拉框
              on: {
                input: value => {
                  //随着下拉框的不同，文字框里的内容在边
                  this.logLevel = value;
                }
              },
              props: {
                value: this.logLevel //文字框的内容取决于这个value，如果value不存在，会报错
              }
            },
            [
              //下拉框里面填充选项，通过filters遍历map，为每一个选项赋值。
              filters.map(item => {
                return h("el-option", {
                  props: {
                    value: item.value,
                    label: item.text
                  }
                });
              })
            ]
          )
        ]
      );
    },