VUE el-table列表搜索功能纯前端实现方法

目录

• 背景：
• 直接看代码：
• searchInput.vue
• 总结 

<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>

<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(null, 37, 41, 1);
    border: 0.5px solid rgba(null, 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>