如何在Flet DataTable中编辑不同行的数据？

在Flet的DataTable中录入2条及以上记录后，点击第二或第三条记录的编辑按钮（IconButton）时，编辑弹窗仅会加载第一条记录的数据。

截图说明：编辑弹窗显示的始终是第一条记录的产品名称、分类和重量信息，与点击的目标记录不符。

相关代码 #

主代码

import flet as ft
from flet import *


def main(page: ft.Page):

    codpro = TextField(label="CÓDIGO PRODUCTO")
    nompro = TextField(label="NOMBRE PRODUCTO")

    # 分类下拉框
    ddcate = ft.Dropdown(label="CATEGORIA",
        width=150,
        options=[
            ft.dropdown.Option("dulce"),
            ft.dropdown.Option("salado"),
        ],
    )

    # 重量单位下拉框
    ddpeso = ft.Dropdown(label="PESO",
        width=100,
        options=[
            ft.dropdown.Option("KG"),
            ft.dropdown.Option("G"),
        ],
    )

    # 创建编辑数据用的控件
    edit_nomprotxt = TextField(label="NOMBRE PRODUCTO")

    edit_ddcate = ft.Dropdown(label="CATEGORIA",
        width=150,
        options=[
            ft.dropdown.Option("dulce"),
            ft.dropdown.Option("salado"),
        ],
    )

    edit_ddpeso = ft.Dropdown(label="PESO",
        width=100,
        options=[
            ft.dropdown.Option("KG"),
            ft.dropdown.Option("G"),
        ],
    )


    # 产品数据表
    tablaproducto = DataTable(
                  # 列标题  
                  columns=[
                      DataColumn(Text("CÓDIGO")),
                      DataColumn(Text("PRODUCTO")),
                      DataColumn(Text("CATEGORÍA")),
                      DataColumn(Text("PESO")),
                      DataColumn(Text("ACCIONES")),
                  ],
                  # 行数据  
                  rows=[]          
    )

编辑弹窗及函数代码

# 创建编辑弹窗
dialog = AlertDialog(
    title=Text("Editar datos"),
    content=Column([
        edit_nomprotxt,
        edit_ddcate,
        edit_ddpeso,
                 
    ]),
    actions=[
        TextButton("Guardar",
                   on_click=guardar
                  )
    ]
)

# 编辑函数（当前存在问题的版本）
def editar(e):
    
    edit_nomprotxt.value = tablaproducto.rows[0].cells[1].content.value
    edit_ddcate.value = tablaproducto.rows[0].cells[2].content.value
    edit_ddpeso.value = tablaproducto.rows[0].cells[3].content.value

    page.dialog = dialog
    dialog.open = True
    page.update()

问题原因 #

编辑函数editar中硬编码了tablaproducto.rows[0]，固定获取第一行（索引0）的数据，无论点击哪条记录的编辑按钮，都会加载第一条记录的内容。

解决方法 #

• 修改行的创建逻辑：添加行时，为每个编辑按钮绑定对应行的索引。示例添加行的函数如下：

# 示例添加行的逻辑（需整合到你的代码中）
def agregar_fila(e):
    new_row = DataRow(
        cells=[
            DataCell(Text(codpro.value)),
            DataCell(Text(nompro.value)),
            DataCell(Text(ddcate.value)),
            DataCell(Text(ddpeso.value)),
            DataCell(
                IconButton(
                    icon=ft.icons.EDIT,
                    # 通过默认参数传递当前行索引，避免lambda延迟绑定问题
                    on_click=lambda e, idx=len(tablaproducto.rows): editar(e, idx)
                )
            )
        ]
    )
    tablaproducto.rows.append(new_row)
    page.update()

• 更新编辑函数：接收行索引参数，根据索引获取目标行的数据：

# 修改后的编辑函数
def editar(e, row_idx):
    target_row = tablaproducto.rows[row_idx]
    edit_nomprotxt.value = target_row.cells[1].content.value
    edit_ddcate.value = target_row.cells[2].content.value
    edit_ddpeso.value = target_row.cells[3].content.value

    page.dialog = dialog
    dialog.open = True
    page.update()

• 关键注意点：lambda中使用idx=len(tablaproducto.rows)作为默认参数，能确保每个按钮在创建时就绑定了当前的行索引，避免所有按钮都指向最后一行的问题。

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