Vue实现搜索功能

Vue 实现搜索功能

作者：爱编程的小金毛球球

日期：2020年3月22日

首先上图演示一下，菜单列表显示的搜索功能：
这里介绍一下应用到的v-model：双向数据绑定，常用于表单元素例如input元素。

HTML

<template>
  <div id="alarmlist">
    <header>
      <div id="header_input">
        <input type="text" placeholder="请输入搜索内容" v-model="search" id="search-input">
      </div>
    </header>
    <div id="content">
            <table v-for="warn in warnList"  id="table-show">
              <tr>
                <td class="headline" colspan="2">
                  <router-link v-if="warn.dealResult == '已处理'" :to="{ path: '/AlarmTreated',query: {warn:warn}}">
                  这是{{warn.id}}告警信息
                  </router-link>
                  <router-link v-else="warn.dealResult == '未处理'" :to="{ path: '/AlarmUntreated',query: {warn:warn}}">
                  这是{{warn.id}}告警信息
                  </router-link>
                </td>
              </tr>
              <tr>
                <td class="show-namewarn-time">
                  <div>电站名称：山东高密</div>
                  <div>告警时间：{{warn.warn_time}}</div>
                </td>
              </tr>
              <tr>
                <td colspan="2">告警信息：{{warn.name}}</td>
              </tr>
              <tr>
                <td  colspan="2">
                  处理状态：
                  <button id="btn-stat">
                      {{warn.dealResult}}
                  </button>
                </td>
              </tr>
            </table>
    </div>
  </div>
</template>

JS

export default {
    data() {
      return {
        nList: [],
        search: '', //初始化数据为空
      }
    },
    created() {//创建完成以后请求数据
      this.getData();
    },
    computed : {
      //搜索功能函数
      warnList: function() {	//数据源定义一个函数
        var search = this.search;	//定义search保存input输入的数据
        if (search) {				//判断search里面的数据
          return this.nList.filter(function(product) {//这里返回的nlist是通过get获取的数据
            return Object.keys(product).some(function(key){
              return String(product[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.nList;	//返回nlist数据
      }
    },
    methods: {
      getData(){      //获取数据（这里只是我调用的接口的获取方式，只要能获取接口即可）
        let Message = this.pageSize + this.search + this.pageIndex;
        let key = 'H@ppy1@3';
        let hash = Cryptojs.HmacSHA256(Message, key).toString();
        let sign = this.$MD5(hash).toUpperCase();
        let formData = new FormData();
        formData.append('index', this.pageIndex);
        formData.append('num', this.pageSize);
        formData.append('sign', sign);
        formData.append('name', this.search);
        request({
          url: '/interface/Warns',
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'token': this.Token,
            'platform': 'a'
          },
          data: formData
        }).then(res => {
          let data = res.data.data.list;
          let newList = [];		//接口中有很多字段，这里只去id，name，detail等字段
          data.map(item=>(
                  newList.push({
                    id:item.id,
                    name:item.name,
                    detail:item.detail,
                    r_id:item.r_id,
                    dealResult: item.dealResult,
                    reason: item.reason,
                    warn_time:item.warn_time
                  })
          ));
          this.nList = this.nList.concat(newList);  //将每次获取的数据拼接吗，由于我之前实现下拉加载，所以使用这条语句
          console.log(this.nList);
        }).catch(err => {
          console.log(err);
        })
      },
    }
  }
</script>