VUE + Element-UI 使用el-table 如何实现表头文字加文字说明

744 阅读1分钟

给 el-table-column 添加 :render-header="renderHeader"

    // 表头增加提示
    // render 事件
    renderHeader(h, { column }) {
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              effect: "dark",//背景颜色
              content: "提示内容",
              placement: "top",
            },
          },
          [
            h("i", {
              class: "el-icon-question", //icon图标
              style: "color:#909399;margin-left:5px;",
            }),
          ],
          {
            content: "",
          }
        ),
      ]);
    },

先看效果:

当鼠标放到“❓”上面是,弹出一个小框进行提示:

代码如下:

参考文档:

blog.csdn.net/helloword17…