vue学习之elementUI表格自定义表头

最新推荐文章于 2024-09-11 12:02:51 发布

King_960725

最新推荐文章于 2024-09-11 12:02:51 发布

阅读量1.5k

点赞数 1

分类专栏： vue学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_42566993/article/details/112648549

版权

vue学习专栏收录该内容

55 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js项目中利用Element UI库的el-table组件，为表头添加带有图标的悬浮提示。通过自定义渲染header，结合el-popover组件实现悬停显示详细说明，提升了用户体验。

摘要由CSDN通过智能技术生成

问题描述：el-table表头添加icon悬浮提示

样式展示：

在这里插入图片描述

代码：

<el-table-column min-width="80" :render-header="renderHeader">
  <template slot-scope="scope">
    {{ scope.row.growthValueThreshold / 100 }}元
  </template>
</el-table-column>


methods: {
    renderHeader(){
      return (
        <div>
          <el-popover trigger="hover" placement="top-start">
            <div>如品牌已关闭根据消费数据自动计算会员等级，则此配置不会生效。</div>
            <div class="tips" slot="reference">
              <span class="data">累计金额</span>
              <i class="iconfont icon-wenhao1"></i>
            </div>
          </el-popover>
        </div>
      )
    }
 }