给 element ui 表格的表头添加图标

最新推荐文章于 2025-06-04 15:16:41 发布

TRACER~85

最新推荐文章于 2025-06-04 15:16:41 发布

阅读量3.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： elementui

本文链接：https://blog.youkuaiyun.com/WEB___/article/details/124538599

前端专栏收录该内容

12 篇文章

订阅专栏

这段代码展示了如何在Element UI的表格组件中利用`slot=header`来定制表头，同时结合`el-tooltip`组件提供额外的提示信息。通过这种方式，可以为'订单总额'、'已进货'和'已退货'三列添加详细说明，提升用户对数据的理解。

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

使用 slot="header" 插槽即可。
相关代码：

<el-table-column prop="total" label="" show-overflow-tooltip>
          <template slot="header">
            订单总额
            <el-tooltip class="item" effect="dark" content="供应商已进货和已退货的总额" placement="bottom">-->
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="totalPurchase" label=" " show-overflow-tooltip>
          <template slot="header">
            已进货
            <el-tooltip class="item" effect="dark" content="供应商已进货的金额" placement="bottom">-->
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="totalReturn" label=" " show-overflow-tooltip>
          <template slot="header">
            已退货
            <el-tooltip class="item" effect="dark" content="供应商已退货的金额" placement="bottom">-->
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
        </el-table-column>

效果展示：
在这里插入图片描述