1.首先附上 Element-ui 官方文档中的说明

https://element.eleme.io/#/zh-CN/component/table#table-column-scoped-slot
在这里插入图片描述

2 如何使用
  • 首先在需要添加 icon 的地方,绑定 render-header attribute ,如下:
  <el-table-column
     icon="el-icon-refresh"
     :render-header="renderHeaderMethod"
   >
 </el-table-column>
  • 具体如何添加如下:
  renderHeaderMethod(h, { column, $index }) {
  // h 是一个渲染函数       column 是一个对象表示当前列      $index 第几列
    return h("div", [
      h("span", column.label + "  ", {
        align: "left"
      }),
      h(
        "el-popover",
        {
          props: {
            placement: "top-start",    // 一般 icon 处可添加浮层说明,浮层位置等属性
            width: "300",
            trigger: "hover"
          }
        },
        [
          h("p", "XXXXXXXXXXXXXXXX", {
            class: "text-align: right; margin: 0"
          }),
          h("i", {                            // 生成 i 标签 ,添加icon 设置 样式,slot 必填
            class: "el-icon-question",
            style: "color:#ccc,margin:18px",
            slot: "reference"
          })
        ]
      )
    ]);
  }
Logo

前往低代码交流专区

更多推荐