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

最新推荐文章于 2025-02-14 17:14:29 发布

原创最新推荐文章于 2025-02-14 17:14:29 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

Vue 同时被 3 个专栏收录

59 篇文章

订阅专栏

前端

24 篇文章

订阅专栏

Element-UI

14 篇文章

订阅专栏

本文介绍了如何在Vue项目中，结合Element-UI库，为el-table组件的表头添加文字说明。通过在el-table-column上使用:render-header属性，并在methods中定义renderHeader方法，实现鼠标悬停时显示提示信息的效果。

先看效果：

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

代码如下：

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

然后在methods 方法中这样写：

    // 表头增加提示
    // render 事件
    renderHeader(h, { column }) {
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              effect: "dark",//背景颜色
              content: "1 ~ 10为有效数据; 0或15为无效数据; 1 ~ 3是深睡状态; 4 ~ 6是浅睡状态; 7 ~ 10是活动状态",
              placement: "top",
            },
          },
          [
            h("i", {
              class: "el-icon-question", //icon图标
              style: "color:#909399;margin-left:5px;",
            }),
          ],
          {
            content: "",
          }
        ),
      ]);
    },