elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息

当牛做马*

已于 2024-01-08 13:44:16 修改

阅读量6.3k

点赞数 4

文章标签： elementui vue.js javascript

于 2022-09-05 15:38:55 首次发布

本文链接：https://blog.csdn.net/qq_44476779/article/details/126705483

版权

目的：elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息

项目经理要求表格头部添加一个图标，鼠标移入提示用户字段包含的内容信息，以前没有开发过，故总结一下。
在这里插入图片描述

添加方法：

方法一、

只是单纯的想在table中添加图标和tooltip(此方法无法使tooltip换行)

第一步: 在el-table-column中绑定:render-header=“renderPrice”

 <el-table-column label="宫缩" align="center" width="200">
</el-table-column>

第二步：

renderPrice(h, { column, $index }) {
      return [
        column.label,
        h(
          'el-tooltip',
          {
            props: {
              content: '弱宫缩：宫缩持续20-30秒 
                          中度宫缩：宫缩持续30-40秒
                          强度宫缩：宫缩持续40秒以上'
              placement: 'top'  // 悬停内容展示的位置
            }
          },
          [h('span', { class: { 'el-icon-question': true }})] // 图标
        )
      ]
    },

方法二、

使用组件插槽，elementui已封装好

<el-table-column align="center" label="缩力" width="150px">
 <template v-slot:header='scope'>     // 插槽插入header
	 <span>
	   缩力
	  <el-tooltip
	    :aa="scope"
	    class="item"
	    effect="dark"
	    placement="top-start"
	   >
	   <i class="el-icon-question"> </i>
	
	   <div style="width: 200px" slot="content">
	           弱宫缩：宫缩持续20-30秒 <br />
	           中度宫缩：宫缩持续30-40秒<br />
	           强度宫缩：宫缩持续40秒以上
	   </div>
	  </el-tooltip>
	</span>
 </template>
 </el-table-column>