需求:给table表头一个提示图标,鼠标悬浮展示内容提示
效果:
<el-table-column
prop="shareNum"
label="CPE"
:render-header="tableActionCpe"
>
</el-table-column>
在自定义表格中使用 :render-header’属性,值为定义的方法
//提示内容
tableActionCpe() {
return this.$createElement(
"HelpHint",
{
props: {
content: "CPE内容",
},
},
"CPE"
);
},
HelpHint为定义的外部组件
import HelpHint from '@/components/HelpHint/HelpHint.vue';
HelpHint.vue内容:
<template>
<span>
<span style="margin-right: 8px"><slot></slot></span>
<el-tooltip :content="content" :placement="placement">
<i class="el-icon-question" style="cursor: pointer;"></i>
</el-tooltip>
</span>
</template>
<script>
export default {
name: 'HelpHint',
props: {
placement: {
default: 'top'
},
content: String,
},
data() {
return {}
},
}
</script>
来源:https://blog.csdn.net/love_weiai/article/details/127360739