How to use render-header function in table-column in Element library?

Question

I need to have a custom table header (title + svg + tooltip) for Element table. I am trying to use the 'render-header' function without luck. To be more specific - how to print the label + SVG (with tooltip on hover) for each column?

Html:

 <el-table-column property="name" label="Indicator" :render-header="appendTip">
        </el-table-column>

Script:

appendTip(h, { column }) {
      return h(
        "el-tooltip",
        {
          attrs: {
            effect: "dark",
            content: "Test",
            placement: "top"
          }
        },
        [h("el-button", ["Tooltip"])]
      );

Thanks.

tony19 · Accepted Answer · 2022-07-15 00:30:34Z

4

This is my solution:

appendTip(h, { column, $index }) {
      // Function(h, { column, $index })
      return h("span", [
        column.label,
        h(
          "el-popover",
          {
            props: {
              placement: "top",
              // title: "hello",
              // width: "200",
              trigger: "hover",
              content: this.test(column.label)
            }
          },
          [
            h(
              "i",
              {
                slot: "reference",
                class: "el-icon-info"
                //style: "color:gray;font-size:16px;margin-left:10px;"
              },
              ""
            )
          ]
        )
      ]);

I used this as a reference: https://v2.vuejs.org/v2/guide/render-function.html

edited Jul 15, 2022 at 0:30

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 16, 2018 at 10:34

badigard

8502 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jatin C · Accepted Answer · 2018-09-22 06:19:03Z

I have modified little bit for my requirements, I do not need [i] button for popover, I needed popover on header text, so the syntax that worked for me is given below

appendTip: function (h, { column, $index }) {

var content = "Popover content"
if (column.property == "isrequired") {
    content = "Value is Required";
}
else {
    return column.label;
}

return h(
        "el-popover",
        {
            props: {
                placement: "top",
                // title: "hello",
                // width: "200",
                trigger: "hover",
            }
        },
        [
            content,
            h(
                "span",
                {
                    slot: "reference",
                },
                column.label
            )
        ]
    );
},

Thanks badigard for your answer, that helped me a lot.

Collectives™ on Stack Overflow

How to use render-header function in table-column in Element library?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related