![19088858-0aa7612ec29de36e.png](https://img-blog.csdnimg.cn/img_convert/a55cd67260e524badeb3cfaac034f760.png)
image.png
第一步 加上搜索框
![19088858-4a58e20309f73276.png](https://img-blog.csdnimg.cn/img_convert/e34f244a1894708d3a50e45fc8766312.png)
image.png
<template slot="header">
<el-input class="search" v-model="search" prefix-icon="el-icon-search" clearable placeholder="输入文章标题搜索" />
</template>
然后在data中定义search 不然搜索框输入不了东西
第二步 methods定义方法
searchItem() {
const searchItemdata = this.allItems.filter(data => !this.search || data.title.toLowerCase().includes(this
.search
.toLowerCase()))
this.allItems = searchItemdata
this.setPaginations()
},
上面的!this.search || data.title.toLowerCase 中的title是你查找的数据
有一些我调用的方法就不贴出来了 自己传递数据 调用查询的方法重新刷新页面
第三步
在watch监听数据变化然后调用更新数据
watch: {
search: function (new_v) {
if (new_v != '') {
this.searchItem()
} else {
this.fetch()
}
}
}
通用也是调用方法来实现查询数据 你自己修改一下 那个fetch就是我查询接口的方法
成功上图
![19088858-6a8be97014a2fc69.png](https://img-blog.csdnimg.cn/img_convert/43fcc351b293a68cc4acc438f5db621d.png)
image.png
顺便贴一下样式 因为搜索框有点歪
<style lang="scss">
.el-icon-search {
margin-left: 6px;
}
.el-icon-circle-close:before {
margin-right: 20px;
}
</style>