Dash多标签页表格交互问题：点击Add按钮无法触发回调添加行

我正在构建一个包含两个标签页的Dash应用，每个标签页中都有一个表格。希望实现：点击推荐候选人表格中的“Add”按钮，将该候选人添加到候选人标签页的表格中，反之亦然。但当前代码中选中某一行并点击Action列的“Add”按钮时，回调并未触发。

• active_cell是单元格选中事件而非点击事件：点击单元格内的文本不会触发active_cell更新，只有选中单元格空白处才会触发，不符合“点击Add按钮”的交互逻辑。
• 动态表格会重置数据：切换标签页时，render_content回调会重新生成表格并使用初始数据，导致之前添加的数据丢失。
• 未激活标签页的组件未加载：Dash默认不渲染未激活标签页的内容，初始时recommended-table不存在，回调依赖的组件无法正确绑定。

import dash
from dash import dcc, html, Input, Output, State, ctx
import dash_bootstrap_components as dbc
import dash_table
import pandas as pd

# 初始数据
initial_candidates = pd.DataFrame({
    'Name': ['Candidate 1', 'Candidate 2', 'Candidate 3'],
    'Age': [30, 25, 28]
}).to_dict('records')

initial_recommended = pd.DataFrame({
    'Name': ['Recommended 1', 'Recommended 2'],
    'Age': [32, 27]
}).to_dict('records')

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config.suppress_callback_exceptions = True

app.layout = html.Div([
    # 用dcc.Store持久化数据，避免标签切换重置
    dcc.Store(id='candidates-store', data=initial_candidates),
    dcc.Store(id='recommended-store', data=initial_recommended),
    
    dcc.Tabs(id='tabs-example', value='tab-1', children=[
        dcc.Tab(label='Candidates', value='tab-1'),
        dcc.Tab(label='Recommended Candidates', value='tab-2'),
    ]),
    html.Div(id='tabs-content')
])

# 渲染标签页内容，从Store读取实时数据
@app.callback(
    Output('tabs-content', 'children'),
    Input('tabs-example', 'value'),
    State('candidates-store', 'data'),
    State('recommended-store', 'data')
)
def render_content(tab, candidates_data, recommended_data):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Candidates'),
            generate_table(candidates_data, 'candidates-table', has_action=False),
        ])
    elif tab == 'tab-2':
        # 为推荐表格的每行添加带索引的Add按钮
        recommended_with_action = []
        for idx, row in enumerate(recommended_data):
            row['Action'] = html.Button('Add', id={'type': 'add-btn', 'index': idx}, n_clicks=0)
        return html.Div([
            html.H3('Recommended Candidates'),
            generate_table(recommended_with_action, 'recommended-table', has_action=True),
        ])
    else:
        return html.Div("404 Error: Page not found")

# 处理添加候选人的回调，通过按钮点击触发
@app.callback(
    Output('candidates-store', 'data'),
    Output('recommended-store', 'data'),
    Input({'type': 'add-btn', 'index': dash.ALL}, 'n_clicks'),
    State('candidates-store', 'data'),
    State('recommended-store', 'data'),
    prevent_initial_call=True
)
def add_candidate(add_clicks, candidates_data, recommended_data):
    # 获取触发回调的按钮索引
    triggered_id = ctx.triggered_id
    if not triggered_id:
        return candidates_data, recommended_data
    
    row_idx = triggered_id['index']
    # 提取要添加的候选人数据（排除Action列）
    candidate_to_add = {k: recommended_data[row_idx][k] for k in ['Name', 'Age']}
    # 添加到候选人列表
    candidates_data.append(candidate_to_add)
    # 可选：从推荐列表移除该候选人，取消注释即可启用
    # recommended_data.pop(row_idx)
    
    print(f"Added candidate: {candidate_to_add}")
    return candidates_data, recommended_data

# 生成表格的工具函数，支持是否显示Action列
def generate_table(data, table_id, has_action=False):
    columns = [{'name': col, 'id': col} for col in data[0].keys() if col != 'Action']
    if has_action:
        columns.append({'name': 'Action', 'id': 'Action', 'presentation': 'markdown'})
    
    return dash_table.DataTable(
        id=table_id,
        columns=columns,
        data=data,
        editable=True,
        # 允许渲染HTML按钮
        markdown_options={'html': True}
    )

if __name__ == '__main__':
    app.run_server(debug=True)

• 用dcc.Store持久化数据：彻底解决标签页切换时数据重置的问题，所有数据变更都存储在Store中。
• 带索引的按钮触发回调：为每个Add按钮设置带行索引的字典ID，通过ctx.triggered_id精准定位要操作的行。
• 启用HTML渲染：在表格中开启markdown_options={'html': True}，让按钮能正常显示并响应点击。
• 分离Action列逻辑：生成表格时根据需求决定是否显示Action列，避免数据结构冗余。

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