在el-table表头添加提示框

背景

前端新手，vue.js刚接触。慢慢学习中。
有查到资料说用jsx来实现的，有时间再试试吧。

html 代码

<template>
	<el-table ....>
		<el-table-column
		      prop="yzjg"
			  type="info"
			  :render-header="renderHeader"
		      label="验证结果">
		      //这些都不重要，重要的是render-header的实现
		</el-table-column>
	</el-table>
</template>

js代码

renderHeader: function (h,{ column, $index }) {
					return [
						column.label,
						h(
							'el-tooltip',
							{
								props: {
									placement: 'top',
									effect:"light",
									//content:"提示框内容",//如果提示内容短不需要换行，直接使用这个提示内容
								},
							},
							[
								h('div',
									{//当前div是为了实现换行，就这换行研究了好久。。。
										slot:"content",
									},
									["第一段",
										h('br'),
										"第二段",
										h('br'),
										"第三段"]
								),
								h('span', {//问号模块
									class: {
										'el-icon-question': true
									}
								}),
							],
						)
					]
				},

js代码实现的renderHeader 等同于

<el-tooltip placement="top" effect="light">
 <div slot="content">第一段<br/>第二段<br/>第三段</div>
 <span class="el-icon-question"></span>
</el-tooltip>

效果

参考链接

https://segmentfault.com/a/1190000016364550
https://www.jb51.net/article/191756.htm