如何在Taipy中点击表格行时使用on_action并显示对应图片

核心实现思路 #

• 给Taipy表格绑定on_action事件，监听行点击动作
• 在事件回调中获取选中行的对应数据（比如图片路径字段）
• 更新图片组件的content属性，实现图片切换

修改后的完整代码 #

from taipy.gui import Gui, State

# 模拟数据源，每行包含名称和对应的图片路径
data = [
    {"name": "示例图片1", "img_path": "./images/img1.jpg"},
    {"name": "示例图片2", "img_path": "./images/img2.jpg"},
    {"name": "示例图片3", "img_path": "./images/img3.jpg"}
]

# 初始化当前选中的图片路径
selected_img = "./images/default.jpg"

def on_table_select(state: State, action, payload):
    # 监听表格的行点击动作
    if action == "row_select":
        # 获取选中行的索引
        row_idx = payload["index"]
        # 更新选中的图片路径
        state.selected_img = data[row_idx]["img_path"]

# 页面布局
page = """
# 表格点击展示图片

<|{data}|table|on_action=on_table_select|show_all|>

<|{selected_img}|image|width=500px|>
"""

if __name__ == "__main__":
    Gui(page).run()

关键代码说明 #

• on_action=on_table_select：给表格绑定点击事件回调函数
• 在on_table_select函数中，通过payload["index"]获取选中行的索引，进而从数据源中拿到对应图片路径
• 图片组件通过绑定selected_img变量，实现路径更新时自动切换显示的图片

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