Are you an LLM? You can read better optimized documentation at /front/component/ma-search/examples/collapsible-search.md for this page in Markdown format
折叠搜索
展示搜索表单的折叠和展开功能，适用于搜索项较多的场景，通过折叠功能节省页面空间，提升用户体验。
折叠搜索演示
折叠功能说明
基本配置
通过 fold 和 foldRows 参数控制折叠行为：
typescript
const searchOptions = {
fold: true, // 启用折叠功能
foldRows: 2, // 默认显示 2 行
}1
2
3
4
2
3
4
自定义按钮文案
通过 text 配置自定义折叠按钮的文案：
typescript
const searchOptions = {
text: {
isFoldBtn: '展开更多搜索条件',
notFoldBtn: '收起部分搜索条件'
}
}1
2
3
4
5
6
2
3
4
5
6
编程式控制
通过组件实例方法控制折叠状态：
typescript
// 切换折叠状态
searchRef.value?.foldToggle()
// 获取当前折叠状态
const isFold = searchRef.value?.getFold()1
2
3
4
5
2
3
4
5
使用场景
1. 后台管理系统
在管理后台中，通常需要多个搜索条件，折叠功能可以保持界面整洁。
2. 数据分析平台
复杂的数据筛选条件，通过折叠展示最常用的条件，高级条件隐藏在折叠区域。
3. 移动端适配
在移动设备上，屏幕空间有限，折叠功能特别重要。
折叠策略
智能折叠
- 自动计算需要折叠的搜索项数量
- 优先显示最常用的搜索条件
- 保持操作按钮始终可见
响应式折叠
- 根据屏幕尺寸自动调整折叠行数
- 移动端默认更加紧凑的显示方式
- 平滑的展开/收起动画效果
关键特性
- 📱 移动端友好的设计
- 🔄 平滑的展开/收起动画
- 🎛 灵活的折叠行数配置
- 📝 可自定义的按钮文案
- ⚡ 编程式的状态控制
最佳实践
1. 合理设置折叠行数
根据实际业务场景和页面布局，合理设置 foldRows 参数：
typescript
// 桌面端推荐 2-3 行
// 移动端推荐 1-2 行
const searchOptions = {
foldRows: window.innerWidth < 768 ? 1 : 2
}1
2
3
4
5
2
3
4
5
2. 优化搜索项顺序
将最常用的搜索条件放在前面，确保在折叠状态下仍然可见。
3. 提供状态指示
通过自定义按钮文案或图标，清晰地提示用户当前的折叠状态。