如何在元素库的表列中使用渲染头函数？答案

【问题标题】：How to use render-header function in table-column in Element library?如何在元素库的表列中使用渲染头函数？
【发布时间】：2018-12-23 05:26:23
【问题描述】：

我需要有一个元素表的自定义表头（标题 + svg + 工具提示）。我试图在没有运气的情况下使用“render-header”功能。更具体地说 - 如何为每列打印标签 + SVG（悬停时带有工具提示）？

HTML：

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

脚本：

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

谢谢。

【问题讨论】：

标签： vuejs2 element-ui

【解决方案1】：

我根据自己的要求做了一些修改，我不需要弹出框的 [i] 按钮，我需要在标题文本上弹出框，所以下面给出了对我有用的语法

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

感谢badigard的回答，对我帮助很大。

【讨论】：

【解决方案2】：

这是我的解决方案：

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

我以此为参考： https://vuejs.org/v2/guide/render-function.html

【讨论】：