image.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就是我查询接口的方法
成功上图
image.png
顺便贴一下样式 因为搜索框有点歪
<style lang="scss">
.el-icon-search {
margin-left: 6px;
}
.el-icon-circle-close:before {
margin-right: 20px;
}
</style>
