el-table表头添加图标

最新推荐文章于 2025-03-04 10:54:32 发布

原创最新推荐文章于 2025-03-04 10:54:32 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章介绍了如何在ElementUI的el-table中为表头添加特殊内容，包括使用el-tooltip展示额外信息以及模板的动态渲染，以本周为例详细展示了实现方法。

el-table的表头添加特殊内容

<el-table-column label="本周" align="center">  
  <template #header>  
    <div>
    <span>本周</span>  
      <el-tooltip class="item" effect="dark" placement="top" :disabled="!showDataDate.rangeWeek">  
        <div slot="content">{{ showDataDate.rangeWeek }}</div>  
        <i class="el-icon-info" style="margin-left: 10px" />  
      </el-tooltip>    
    </div>  
  </template>  
  <el-table-column label="收益" ... />  
  <el-table-column label="超额" ... />  
</el-table-column>