uniapp搜索功能实现在清空搜索条件的时候还原数据
时间: 2023-12-04 09:02:10 浏览: 112
jquery ztree实现树的搜索功能
要实现在清空搜索条件时还原数据,可以采取以下步骤:
1. 在页面的 data 中定义一个 originData 对象,用于存储页面原始数据。
2. 在页面加载时,将原始数据赋值给 data 中的一个变量,例如 dataList。
3. 在搜索条件改变时,根据条件筛选 dataList 中的数据,然后将筛选后的数据赋值给 dataList。
4. 在清空搜索条件时,将 originData 中的数据赋值给 dataList。
以下是一个简单的示例代码:
```
<template>
<view>
<input type="text" v-model="keyword" @input="search">
<button @click="reset">清空</button>
<ul>
<li v-for="(item, index) in dataList" :key="index">{{ item }}</li>
</ul>
</view>
</template>
<script>
export default {
data() {
return {
originData: ['apple', 'banana', 'orange', 'pear'],
dataList: [],
keyword: ''
}
},
mounted() {
// 页面加载时将原始数据赋值给 dataList
this.dataList = this.originData
},
methods: {
search() {
// 搜索时根据关键词筛选数据
this.dataList = this.originData.filter(item => item.includes(this.keyword))
},
reset() {
// 清空搜索条件时将原始数据赋值给 dataList
this.dataList = this.originData
this.keyword = ''
}
}
}
</script>
```
阅读全文