vxe-table表头气泡悬浮
时间: 2023-12-31 22:23:55 浏览: 60
vxe-table提供了一个render-header属性,可以用于自定义表格头部的显示内容。在这个属性中,你可以使用el-tooltip组件来实现表头的气泡悬浮效果。下面是一个示例代码:
```html
<el-table-column :render-header="renderHead" label="采购比重" prop="xxxx"></el-table-column>
```
```javascript
methods: {
// 渲染表格头自定义显示悬浮ui提示
renderHead(show, { column }) {
return [
column.label,
show('el-tooltip', {
props: {
content: '自然年累计数据,每年1月1日-今日',
placement: 'top'
}
}, [
show('span', { class: { 'el-icon-question': true } })
])
]
}
}
```
在这个示例中,我们使用了el-tooltip组件来创建一个气泡悬浮效果。通过props属性,我们可以设置气泡的内容和位置。在renderHead方法中,我们返回一个数组,数组的第一个元素是表格头部的显示内容,第二个元素是el-tooltip组件,用于实现气泡悬浮效果。通过show方法,我们可以将el-tooltip组件渲染到表格头部。