如何在NiceGUI表格单个单元格实现命名可点击链接？及add_slot用法解析

当然可以实现你的需求，以下是修改后的代码：

from nicegui import ui

# 只定义一个列，用于显示带跳转链接的站点名称
columns = [
    {'name': 'site', 'label': '网站', 'field': 'name', 'align': 'left'},
]
rows = [
    {'name': 'Google', 'link': 'https://google.com'},
    {'name': 'Facebook', 'link': 'https://facebook.com'},
    {'name': 'Twitter', 'link': 'https://twitter.com'},
]
table = ui.table(columns=columns, rows=rows, row_key='name')

# 自定义site列的单元格渲染逻辑：用站点名称作为链接文本，对应行的link字段作为跳转地址
table.add_slot('body-cell-site', '''
    <q-td :props="props">
        <a :href="props.row.link" target="_blank">{{ props.value }}</a>
    </q-td>
''')

ui.run()

NiceGUI的ui.table基于Quasar框架的QTable组件，add_slot方法是用来自定义表格特定区域的渲染内容，核心逻辑如下：

• 插槽名称遵循Quasar的命名规则：body-cell-{column-name} 专门对应表格中某一列（column-name是你在columns配置里给列定义的name值）的单元格渲染
• 原代码里的body-cell-link，就是针对名为link的列，替换它的默认显示方式
• 插槽内的模板用Vue语法编写：:props="props"用来接收当前单元格的上下文数据，props.value是当前列对应字段的内容（原代码里就是链接地址），props.row可以获取当前行的所有数据

原代码的作用是把link列的纯文本地址变成可点击的链接，但显示的是链接本身；修改后的代码则针对合并后的site列，通过props.row.link拿到当前行的跳转地址，props.value拿到站点名称，实现了"显示名称+点击跳转"的需求。

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