Question

我需要为Element表有一个自定义的表头（标题+ 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"])]
      );

谢谢。

Answer 1

这是我的解决方案：

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

Answer 2

我为自己的要求做了一些修改，我不需要[i]按钮进行弹出，我需要在标题文本上进行弹出，因此下面提供了适用于我的语法

java.lang.ClassCastException

感谢八哥，您的回答对我很有帮助。

如何在Element库的表列中使用render-header函数？

2 个答案: