vue实现collapse搜索
Vue 实现 Collapse 搜索功能
使用 v-for 和 v-if 实现动态折叠
在 Vue 中可以通过 v-for 渲染列表项，结合 v-if 或 v-show 控制折叠状态。创建一个 data 属性来存储搜索关键词和折叠状态：
data() {
return {
searchQuery: '',
activeIndex: null,
items: [
{ title: 'Item 1', content: 'Content 1' },
{ title: 'Item 2', content: 'Content 2' }
]
}
}模板中使用 computed 属性过滤结果并实现折叠交互：
<input v-model="searchQuery" placeholder="Search...">
<div v-for="(item, index) in filteredItems" :key="index">
<div @click="activeIndex = activeIndex === index ? null : index">
{{ item.title }}
</div>
<div v-show="activeIndex === index">
{{ item.content }}
</div>
</div>使用计算属性过滤数据
添加 computed 属性实现搜索功能：
computed: {
filteredItems() {
return this.items.filter(item =>
item.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
item.content.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}使用第三方组件库
对于更复杂的场景，可以使用 Element UI 或 Ant Design Vue 的 Collapse 组件：
<el-collapse>
<el-collapse-item
v-for="(item, index) in filteredItems"
:title="item.title"
:key="index"
>
{{ item.content }}
</el-collapse-item>
</el-collapse>动画效果增强
添加过渡动画提升用户体验：
<transition name="fade">
<div v-show="activeIndex === index">
{{ item.content }}
</div>
</transition>CSS 部分：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}性能优化
对于大型数据集，考虑添加防抖处理搜索输入：
methods: {
debouncedSearch: _.debounce(function() {
// 执行搜索逻辑
}, 300)
}
