我希望单击或 Select 表中的单个行,检索相应行的数据,然后使用处理程序进一步处理它.但目前的文档还很少,而且我以前从未使用过Quasar或Vue.js.
以下是我的try :
from nicegui import ui
columns = [
{'name': 'title', 'label': 'Title', 'field':'title', 'required': True, 'align': 'left'},
{'name': 'author', 'label': 'Author', 'field':'author', 'align': 'left'},
{'name': 'year', 'label': 'Year', 'field':'year', 'sortable': True, 'align': 'left'},
]
rows = [
{'title': 'Some title A', 'url' : 'https://example.com/search?q=A', 'author': 'Alice', 'year': 2023},
{'title': 'Some title B', 'url' : 'https://example.com/search?q=B', 'author': 'Bob', 'year': 2022},
{'title': 'Some title C', 'url' : 'https://example.com/search?q=C', 'author': 'Carol', 'year': 2021}
]
table = ui.table(title='Example table', columns=columns, rows=rows, row_key='name', pagination=5,
selection='single', on_select=lambda e: ui.notify(e.selection))
table.add_slot('body', r'''
<q-tr :props="props" @row-click="rowClick">
<q-td>
<a :href="props.row.url">{{ props.row.title }}</a>
</q-td>
<q-td>{{ props.row.author }}</q-td>
<q-td>{{ props.row.year }}</q-td>
</q-tr>
''')
table.on('rowClick', lambda *args: print(args), [None, None, None]) # c.f. nicegui issues #664, #672, #1095
ui.run()
上面的代码不起作用.没有例外,但如果我单击行,则不会发生任何事情(并且不会显示用于 Select 行的复选框;我可能在使用模板时无意中禁用了它们).
如果我必须 Select ,我更愿意处理一个点击事件.