如何在NiceGUI的ui.table特定单元格添加Tooltip？

NiceGUI的表格组件支持通过**插槽（slot）**自定义单元格内容，结合内置的Tooltip组件就能轻松实现悬停显示提示的效果，以下是具体实现方法：

基础实现示例 #

直接通过插槽为指定列的所有单元格绑定Tooltip：

from nicegui import ui

# 模拟业务数据
data = [
    {'name': '张三', 'age': 25, 'detail': '前端开发新手，正在搭建首个NiceGUI项目'},
    {'name': '李四', 'age': 30, 'detail': '全栈工程师，拥有5年企业级项目经验'},
    {'name': '王五', 'age': 28, 'detail': 'UI/UX设计师，擅长Figma与原型设计'},
]

# 初始化表格
table = ui.table(
    columns=[
        {'name': 'name', 'label': '姓名', 'field': 'name'},
        {'name': 'age', 'label': '年龄', 'field': 'age'},
        {'name': 'detail', 'label': '详情', 'field': 'detail'},
    ],
    rows=data,
).classes('w-full')

# 为「姓名」列的单元格添加Tooltip，显示对应详情信息
table.add_slot('body-cell-name', '''
    <q-td key="name" :props="props">
        <q-tooltip>
            {{ props.row.detail }}
        </q-tooltip>
        {{ props.row.name }}
    </q-td>
''')

ui.run()

条件化显示Tooltip #

如果需要仅对符合特定条件的单元格显示Tooltip，可以在插槽模板中加入Vue的条件判断：

# 为「年龄」列中大于28岁的单元格添加提示
table.add_slot('body-cell-age', '''
    <q-td key="age" :props="props">
        <q-tooltip v-if="props.row.age > 28">
            该用户年龄超过28岁
        </q-tooltip>
        {{ props.row.age }}
    </q-td>
''')

关键说明 #

• 插槽命名规则：body-cell-[列名]，其中「列名」对应表格columns配置中的name字段
• 插槽模板使用Vue语法，通过props.row可以访问当前行的所有数据字段
• q-tooltip是NiceGUI封装的Quasar组件，默认会在鼠标悬停时触发显示

内容的提问来源于stack exchange，提问作者steeeef99