Plotly Dash应用dcc.Dropdown动态生成选项及筛选功能异常问题

• 回调函数中强制覆盖了从State传入的用户选择值systemFilter，无论用户选择了哪些选项，都会被重置为当前搜索结果的全部系统选项，导致用户的筛选操作完全不生效
• dcc.Dropdown初始配置不符合规范：开启multi=True后value必须为列表类型，你初始设为字符串'All'会导致参数异常，同时初始options设为无效字符串'options'也会引发渲染错误
• 缺少状态判断逻辑：首次触发搜索时没有默认全选的处理逻辑，无法满足首次加载返回全部结果的需求

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_table
import pandas as pd
from dash.dependencies import Input, Output, State


external_stylesheets = [dbc.themes.BOOTSTRAP]


app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server

def createTable(): 
    df = pd.DataFrame({'num_legs': [2, 4, 8, 0],
                   'num_wings': [2, 0, 0, 0],
                   'system': ['falcon', 'dog', 'spider', 'fish']},
                  index=[1, 2, 3, 4])
    
    return df

app.layout =  html.Div([
        html.Button('Submit and Refresh', id='button', n_clicks=0, className='btn btn-primary'),
        dbc.Row([dbc.Col([
                            html.Label(["System Filter", 
                                    dcc.Dropdown(
                                            id='systemFilter',
                                            options=[], # 初始设为空列表，由回调动态生成选项
                                            value=[], # 多值下拉初始值为列表类型
                                            multi=True,
                                            )
                                    ])
                                    ], width = 5)
                ]),
        html.Div([dash_table.DataTable(style_cell={
                                            'whiteSpace': 'normal',
                                            'height': 'auto',
                                            'textAlign': 'left'
                                            }, 
                            fill_width=False,
                            id='outTable',
                            sort_action="native",
                            sort_mode="multi",
                            column_selectable="single",
                            row_deletable=True,

                            )
                        ],
                        
                )                ])
                     


@app.callback(
    [Output(component_id='outTable', component_property='data'),
     Output(component_id='outTable', component_property='columns'),
     Output(component_id='systemFilter', component_property='options'),
     ],
    [Input(component_id='button', component_property='n_clicks')],
    [
    State(component_id='systemFilter', component_property='value') # 保留这个State获取用户选择
    ])


def tableCreate(n_clicks, systemFilter):
    if n_clicks > 0:
        searchFrame = createTable()
            
        optionsArray = searchFrame['system'].unique().tolist()
        system_filter_options = [{'label': i, 'value': i} for i in optionsArray]

        # 核心修改：不再覆盖用户选择，无选择时默认全选
        if not systemFilter:
            filter_values = optionsArray
        else:
            filter_values = systemFilter
        
        searchFrame = searchFrame[searchFrame['system'].isin(filter_values)]
        
        columns = [{'name': col, 'id': col} for col in searchFrame.columns]
        data = searchFrame.to_dict(orient='records')
        
        return data, columns, system_filter_options
    else:
        return dash.no_update, dash.no_update, dash.no_update
                                        
                                    

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

1. 调整systemFilter的初始配置：将options初始值设为空列表，value初始值设为空列表
2. 取消回调中systemFilter = optionsArray这行覆盖逻辑，替换为上面示例中的判断逻辑：无用户选择时默认全选，有选择时优先使用用户的选择值
3. 取消回调参数中State('systemFilter', 'value')的注释，确保能拿到用户的选择值
4. 如果有其他同类型的动态下拉筛选器，按照相同逻辑修改即可

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