一、封装全局组件
🍓 注意:可以直接复制该文件
<!-- // 写一个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信息']
}
})
]
);
},
三:效果如下 🍹
四、寄语
人生如棋
我愿为卒
行走虽慢
可谁曾见我后退一步