「Element-UI表头添加带Icon的提示信息」

一、封装全局组件

🍓 注意：可以直接复制该文件

<!-- // 写一个PromptMessage的组件，并全局注册 -->
<template>
 <div class="tooltip">
 <el-tooltip effect="dark" placement="right">
  <div slot="content">
  <p v-for="item in messages" :key="item">
   {{item}}
  </p>
  </div>
  <i class="el-icon-info" style="color:#409eff;margin-left:2px;font-size:13px;"></i>
 </el-tooltip>
 </div>
</template>

<script>
 export default {
	props:['messages']
 };
</script>

🍭 引入：在main.js 中引入全局组件

// 引入
import PromptMessage from '@/views/common/PromptMessage'
// 注册为全局组件
Vue.component('PromptMessage', PromptMessage)

---

二、具体页面如何应用

🍇 以下代码可直接复制粘贴

// 注意： ⚠️ messages信息是以数组的形式展示的 数组里每一个元素展示出来就是一行信息

renderHeader(h, {column}) {		
	return h(
		'div', {
		style: 'display:inline-flex;margin:auto;'
	},
		[
			h('span', column.label),
			h('prompt-message', {
				props: {
					messages: ['这是第一行Tip信息','这是第二行Tip信息']
				}
			})
		]
	);
},

---

三：效果如下 🍹

---

四、寄语

人生如棋
我愿为卒
行走虽慢
可谁曾见我后退一步