VUE查询-历史记录功能

查询历史功能是一个很常见且实用的功能，一般搜索框都会默认加上这个功能。我这里使用element vue组件来实现，原理很简单：查询过的数据放到localStorage，代码简单易用，效果图如下：

代码如下：

html 复制代码

<el-input
  v-model="searchName"
  placeholder="请输入，按回车键过滤"
  style="width: 250px; margin-left: 10px; margin-right: 5px"
  :clearable="true"
  @change="searchSdmid()"
/>

<el-dropdown style="margin-right: 10px">
  <el-button type="text" style="color: #909399">
    <i class="el-icon-time"></i>
  </el-button>
  <el-dropdown-menu v-if="searchHistory.length === 0" slot="dropdown">
    <el-dropdown-item>
      <div class="item-add-padding">无历史记录</div>
    </el-dropdown-item>
  </el-dropdown-menu>

  <el-dropdown-menu v-else slot="dropdown">
    <el-dropdown-item v-for="(item, index) in searchHistory" :key="index" class="clear-padding">
      <div class="item-add-padding" @click="handleSelectSearch(item)">{{ item }}</div>
    </el-dropdown-item>
    <el-dropdown-item divided style="color: #e6a23c">
      <div class="item-add-padding" @click="clearSearches()">清空历史记录</div>
    </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>


export default {
  data() {
    return {
      searchName: '',
      searchKey: '_search_sdmid_',
      searchHistory: [],
    }
  },
  created() {
    this.$nextTick(() => {
      this.searchHistory = this.getSearches()
    })
  },
  methods: {
    //查询
    searchData() {
      if (this.searchName !== '') {
        this.saveSearch(this.searchName)
        this.searchHistory = this.getSearches()

        //下面是过滤数据操作
        ...
      }else{
        return false
      }
    },

    //处理选择后的查询
    handleSelectSearch(item) {
      this.searchName = item
      this.searchData()
    },

    //插入数据处理
    insertArray(arr, val, compare, maxLen) {
      const index = arr.findIndex(compare)
      if (index === 0) return
      if (arr.indexOf(val) === 1) return

      if (index > 0) arr.splice(index, 1)
      arr.unshift(val)
      if (maxLen && arr.length > maxLen) arr.pop()
    },

    //保存查询记录到缓存
    saveSearch(query) {
      const MAX_LENGTH = 10
      var searches = JSON.parse(localStorage.getItem(this.searchKey)) || []
      this.insertArray(searches, query, (item) => item === query, MAX_LENGTH)
      localStorage.setItem(this.searchKey, JSON.stringify(searches))
      return searches
    },

    //获取查询记录
    getSearches() {
      return JSON.parse(localStorage.getItem(this.searchKey)) || []
    },

    //清除查询记录
    clearSearches() {
      localStorage.removeItem(this.searchKey)
      this.searchHistory = []
    },
  }
}