如何在Streamlit中折叠带默认选项的multiselect组件

核心解决方案 #

通过st.expander包裹multiselect组件实现默认折叠，同时优化组件提示文本，避免直接显示默认列的列表字符串，节省UI空间。

修改后的完整代码 #

import pandas as pd
import streamlit as st

data = {
    'Col1': [1, 2, 3, 4, 5],
    'Col2': ['A', 'B', 'C', 'D', 'E'],
    'Col3': [10.1, 20.2, 30.3, 40.4, 50.5],
    'Col4': [True, False, True, False, True],
    'Col5': ['X', 'Y', 'Z', 'W', 'V'],
    'Col6': [100, 200, 300, 400, 500],
    'Col7': ['Apple', 'Banana', 'Orange', 'Grape', 'Mango'],
    'Col8': [0.1, 0.2, 0.3, 0.4, 0.5],
    'Col9': [5, 10, 15, 20, 25],
    'Col10': ['Red', 'Green', 'Blue', 'Yellow', 'Purple']
}
df = pd.DataFrame(data)

with st.sidebar:
    # 用expander包裹组件，默认折叠状态
    with st.expander("设置显示列", expanded=False):
        default_columns = ['Col1', 'Col2', 'Col3', 'Col4', 'Col5']
        selected_columns = st.multiselect(
            "选择要展示的列",
            df.columns.tolist(),
            default=default_columns,
            placeholder=f"已默认选择{len(default_columns)}列"
        )

filtered_df = df[selected_columns]
st.write("筛选后的DataFrame:")
st.dataframe(filtered_df)

关键改动说明 #

• 折叠组件节省空间：用st.expander包裹multiselect，设置expanded=False让组件默认仅显示标题，用户需要调整列时再点击展开，大幅减少侧边栏占用空间。
• 优化默认值显示：通过placeholder参数设置简洁提示文本，替代原本直接显示默认列列表的样式，让UI更清爽。
• 整合冗余提示：将原有的st.write("Columns to display:")整合到expander标题中，避免重复提示。

如果需要完全隐藏选中项的显示区域，可添加自定义CSS实现：

# 在代码开头插入以下CSS
st.markdown("""
<style>
    .stMultiSelect [data-baseweb="tag"] {
        display: none;
    }
</style>
""", unsafe_allow_html=True)

这段代码会隐藏multiselect组件中显示选中项的标签区域，仅保留选择框和占位文本。

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