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

最新推荐文章于 2024-11-06 22:46:56 发布

原创最新推荐文章于 2024-11-06 22:46:56 发布 · 3.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

前端专栏收录该内容

12 篇文章

订阅专栏

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

使用 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>