el-table表头自定义内容

最新推荐文章于 2025-04-28 14:06:58 发布

徐小志~

最新推荐文章于 2025-04-28 14:06:58 发布

阅读量653

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/qq_46561492/article/details/128973241

版权

在Vue.js的el-table组件中，通过设置`render-header`属性可以实现表头的自定义内容。这段代码展示了如何根据列索引添加不同的提示信息，使用`el-tooltip`展示详细说明，并用图标增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table根据条件给表头自定义另外的内容，直接上代码

在el-table-column 中加入:render-header=“renderHeader”

<el-table-column :width="item.width" :render-header="renderHeader"></el-table-column>

 renderHeader(h, { column, $index }) {
      if ($index == 1 || $index == 2 || $index == 3 || $index == 4 || $index == 5) {
        let notes = ''
        switch ($index) {
          case 1: notes = '统计订单状态为已发货和已完成的产品数量'
            break;
          case 2: notes = '出入库申请后仓库审核通过的产品数量，包含退货完成的数量'
            break;
          case 3: notes = '统计已完成退货流程的产品数量'
            break;
          case 4: notes = '当前仓库内实际剩余的产品数量'
            break;
          case 5: notes = '统计当前订单状态为待审核，已发货，已完成产品数量'
            break;
        }
        return h('div', [
          h('span', column.label),
          h('el-tooltip',
            { props: { 
            effect: 'dark', 
            content: notes, 
            placement: 'top' 
            } 
            },
            [h('i', { 
            class: 'el-icon-question', 
            style: 'color:#409eff;margin-left:5px;' 
            })
            ],
          ),
        ]);
      } else {
        return h('div', [h('span', column.label)]);
      }
    },

效果

在这里插入图片描述