在iview项目中需要使用表格的一些气泡提示，在iview的文档中，提供了重写表头的renderHeader方法，但是没有实现的步骤方法和案例，实际做起来还是麻烦，左后还是整出来。 现在记录分享一下。
效果图：
一，表头显示气泡具体方法：
1，在vue组件中定义一个iview表格，传递iview提供的表头格式信息以及表格数据。
<Table :columns="newColumns" :data="data"></Table>
2，在data中定义一个数组对象，选取了iview定义表头的标准格式，用于渲染表格的表头信息，实现效果可以直接赋值下方代码到自己项目中即可使用。关于气泡提示显示的关键代码下方也有注释，
newColumns: [
{
title: "测试1", key: 'test1', minWidth: 120, align: "center" },
{
title: "测试2", key: 'test2', minWidth: 120, align: "center" },
{
title: '',
key: 'zbdf',
align: 'center',
minWidth: 120,
// 气泡提示信息的 关键代码
// 由于重写了表头，所以这里的title就无效了 得下方设置
renderHeader: (h, params) => {
return h('div', [
h('Tooltip', {
props: {
transfer: true,
maxWidth: '250',
theme: 'light'
}
}, [
h('span', '得分（50分）'), // 重写了表头 文字触发气泡
// h('Icon', { // 这里注释是显示 问号图标形式触发
// props: {
// type: 'md-help-circle',
// color: "#c8c8c8",
// size: "20"
// },
// class: {iconClass: true}
// }),
h('div', {
slot: 'content',
style: {
whiteSpace: 'normal'
}
}, '气泡提示信息内容1' // 气泡提示整体信息，需要多个复制即可
),
h('div', {
slot: 'content',
style: {
whiteSpace: 'normal'
}
}, '气泡提示信息内容2'
),
h('div', {
slot: 'content',
style: {
whiteSpace: 'normal'
}
}, '气泡提示信息内容3'
),
])
])
}
}
]
二，当列所有单元显示气泡具体方法：
效果图：
表格定义同上，这里是对表的当列单元格做气泡提示信息，下方选取了iview定义表头的格式如下
newColumns: [
{
title: "测试1", key: 'dfafd', minWidth: 120, align: "center" },
{
title: "测试2", key: 'wewfg', minWidth: 120, align: "center" },
{
title: '在线合格率',
key: 'zxzhhgl',
align: 'center',
minWidth: 150,
// 对当列的数据提示气泡 关键代码
render: (h, params) => {
return h('Tooltip', {
props: {
placement: 'top'
}
}, [
params.row.zxhgl,
h('span', {
slot: 'content', //slot属性
style: {
whiteSpace: 'normal',
wordBreak: 'break-all'
}
}, '当列所有单元格气泡提示信息')
])
}
},
]
更多内容，欢迎关注我的博客：https://soujiz.com/