iView的Tooltip在表格里不显示内容是怎么回事?

♫秀花 阅读 19

我在用iView的Table组件渲染数据时,想给某一列加个Tooltip提示,但鼠标hover上去完全没反应,控制台也没报错。我按照文档写了,但就是不显示,是不是哪里写错了?

下面是我写的代码片段:

<Table :columns="columns" :data="list"></Table>

// columns配置里:
{
  title: '用户名',
  key: 'name',
  render: (h, params) => {
    return h('Tooltip', {
      props: { content: '这是用户的真实姓名' }
    }, [
      h('span', params.row.name)
    ])
  }
}
我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
程序员爱棋
这个问题我遇到过,iView的Tooltip在表格里确实容易踩坑。关键点是你需要在Tooltip外层再加一个div包裹,因为表格单元格的样式可能会影响Tooltip的显示。

改法很简单,把你代码里的render部分改成这样:

{
title: '用户名',
key: 'name',
render: (h, params) => {
return h('div', [
h('Tooltip', {
props: { content: '这是用户的真实姓名' }
}, [
h('span', params.row.name)
])
])
}
}


我当初调试了好久才发现这个坑,iView的Tooltip在Table里必须要有外层容器才能正常触发。别走弯路,直接加个div就完事了。
点赞
2026-03-09 10:15