背景：
对el-table数据进行搜索筛选，但是不想调取接口，纯前端实现
直接看代码：
<template> <div class="project-container"> <SearchInputVue :keyword.sync="keyword" :placeholder="placeholderWords" style="margin-bottom: 20px" /> <div class="table"> <DefectList :defect-list="keyword ? filterDefectList : defectList" :total="fetchListPageData.total" :on-page-change="pageChange" /> </div> </div></template><script lang="ts">import Vue from 'vue'import SearchInputVue from '@/components/Input/SearchInput.vue'import DefectList from './components/DefectList.vue'// import Info from '@/mock.json'import API from '@/api'import { warn } from '@/utils/common'export default Vue.extend({ name: 'Index', components: { SearchInputVue, DefectList // TypeIcon }, data() { return { defectList: [], filterDefectList: [], placeholderWords: '搜索缺陷', keyword: '', fetchListPageData: { total: 0, page: 1, pageSize: 10 } } }, watch: { keyword(newVal) { const keyVal = newVal.replace(' ', '') this.filterDefectList = keyVal ? this.defectList.filter(item => item.title.includes(keyVal)) : this.defectList } }, created() { this.getDefectList() }, methods: { async getDefectList() { try { const res = await API.Defect.defectListData({ keyword: '', page: this.fetchListPageData.page, pageSize: this.fetchListPageData.pageSize }) this.defectList = res.data.list this.fetchListPageData.total = res.data.total } catch (error) { warn(error, true) } }, pageChange(current: number) { this.fetchListPageData.page = current this.getDefectList() } }})</script><style lang="stylus" scoped>.project-container { .project-name { img { position: relative; top: 3px; } }}</style>searchInput.vue
<template> <el-input v-model="_keyword" :placeholder="placeholder" class="search" @change="$emit('trigger-event', _keyword)"> <img slot="prefix" class="search-icon" src="@/image/search.svg" alt="search" /> </el-input></template><script>export default { name: 'SearchInput', props: { placeholder: { type: String, default: '请输入要搜索的内容' }, keyword: { type: String, default: '' } }, computed: { _keyword: { set: function (val) { this.$emit('update:keyword', val) }, get: function () { return this.keyword } } }}</script><style scoped lang="stylus">.search { width: auto; /deep/ .el-input__prefix { margin-left: 10px; line-height: 40px; } /deep/ .el-input__inner { padding-left: 54px; width: 305px; // height: 56px; border-radius: 5px; background-color: rgba(34, 37, 41, 1); border: 0.5px solid rgba(255, 255, 255, 0.1); font-weight: normal; font-size: 16px; line-height: 32px; color: #fff; } /deep/ .el-input__suffix { .el-input__suffix-inner { border-color: none; position: relative; .el-icon-circle-close:before { content: '\e6db' !important; font-size: 24px; color: #387DFF; right: 20px; top: -7px; position: absolute; } } }}.search-icon { vertical-align: middle; line-height: 40px;}</style>