[element-ui] el-table表格头添加图标-鼠标移入显示el-tooltip提示信息

这篇具有很好参考价值的文章主要介绍了[element-ui] el-table表格头添加图标-鼠标移入显示el-tooltip提示信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

方法一、render-header=“renderPrice”(此方法无法使tooltip换行)

只是单纯的想在table中添加图标和tooltip

在el-table-column中绑定:render-header=“renderPrice”(此方法无法使tooltip换行)

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

renderPrice(h, { column, $index }) {
      return [
        column.label,
        h(
          'el-tooltip',
          {
            props: {
              content: '11111'
              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>