You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Taipy中高亮表格的选中行?

解决Taipy GUI表格选中行前端高亮问题

方案1:通过row_style参数动态绑定高亮样式

Taipy的Table组件支持row_style参数,可根据行的选中状态返回自定义CSS类,实现高亮效果:

  1. 定义选中行状态变量
    在Taipy应用代码中先声明追踪选中行的状态变量:

    from taipy.gui import State, Gui, Table
    
    selected_rows = State([])
    # 示例表格数据,实际替换为你的业务数据
    data = [{"id": 1, "name": "Alice"}, {"id": 2, "name": "Bob"}, {"id": 3, "name": "Charlie"}]
    
  2. 配置Table组件的row_style
    创建Table时,通过lambda函数判断当前行是否在选中列表中,返回对应样式类:

    table_component = Table(
        data=data,
        selected=selected_rows,
        # 若selected返回行对象,用唯一标识(如id)判断
        row_style=lambda index, row: "highlight-row" if row["id"] in [r["id"] for r in selected_rows] else ""
        # 若selected返回行索引,直接用index判断:
        # row_style=lambda index, row: "highlight-row" if index in selected_rows else ""
    )
    
  3. 添加自定义CSS样式
    通过Gui.add_style()方法注入高亮样式:

    gui = Gui(page="# My App\n{table_component}")
    gui.add_style("""
    .highlight-row {
        background-color: #cce5ff !important;
        font-weight: 500;
    }
    """)
    

方案2:自定义主题扩展(全局统一样式)

如果需要全局统一的选中行样式,可自定义Taipy主题:

  1. 复制Taipy默认主题的CSS文件,修改表格选中行的样式规则
  2. 初始化Gui时指定自定义主题路径:
    gui = Gui(page=..., theme="path/to/your/custom-theme")
    

注意事项

  • 不同Taipy版本中,selected属性返回的内容可能是行索引或行对象,需根据实际情况调整row_style的判断逻辑
  • 用行对象判断时,建议通过唯一标识符(如id)而非直接比较对象,避免因引用问题导致判断失效

内容的提问来源于stack exchange,提问作者Sai Anoop Avunuri

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.21 16:38:15