Element 라이브러리의 테이블 열에서 렌더 헤더 함수를 사용하는 방법

Element 라이브러리의 테이블 열에서 렌더 헤더 함수를 사용하는 방법

Element 테이블의 커스텀테이블 헤더(제목+svg+툴팁)가 필요합니다.렌더헤더 기능을 사용하려고 하는데 운이 없네요.좀 더 구체적으로 말하면, 각 열의 라벨 + 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"])]
      );

고마워요.

제 솔루션은 다음과 같습니다.

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

요구 사항에 맞게 조금 수정했습니다.팝오버에는 [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
            )
        ]
    );
},

당신의 답변에 감사드리며, 많은 도움이 되었습니다.

언급URL : https://stackoverflow.com/questions/51348701/how-to-use-render-header-function-in-table-column-in-element-library