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
                  }
                });
              })
            ]
          )
        ]
      );
    },