image.png
第一步 加上搜索框
image.png
<template slot="header">
<el-input class="search" v-model="search" prefix-icon="el-icon-search" clearable placeholder="輸入文章標(biāo)題搜索" />
</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是你查找的數(shù)據(jù)
有一些我調(diào)用的方法就不貼出來了 自己傳遞數(shù)據(jù) 調(diào)用查詢的方法重新刷新頁面
第三步
在watch監(jiān)聽數(shù)據(jù)變化然后調(diào)用更新數(shù)據(jù)
watch: {
search: function (new_v) {
if (new_v != '') {
this.searchItem()
} else {
this.fetch()
}
}
}
通用也是調(diào)用方法來實(shí)現(xiàn)查詢數(shù)據(jù) 你自己修改一下 那個(gè)fetch就是我查詢接口的方法
成功上圖
image.png
順便貼一下樣式 因?yàn)樗阉骺蛴悬c(diǎn)歪
<style lang="scss">
.el-icon-search {
margin-left: 6px;
}
.el-icon-circle-close:before {
margin-right: 20px;
}
</style>
