微信小程序的搜索和重置功能

微信小程序的搜索和重置功能

wxml

<template>
  <div>
    <div class="input-wrap">
      <el-input
        search
        v-model="searchVal"
        placeholder="请输入查询内容..."
        @input="autosearch"
        style="width: auto">
      </el-input>
      <el-button type="dashed" class="reset" @click="resetDate">重置</el-button>
    </div>
    <br />
    <el-table border :data="showList">
        <el-table-column prop="date" label="报名日期"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="studentId" label="学号"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
    </el-table>
  </div>
</template>

js

<script>
export default {
  data() {
    return {
      searchVal: "",
      showList: [],
      newList: [],
      dataList: [
        {
          date: "2019-09-26",
          name: "刘邦",
          studentId: 2016127206,
          email: "839170766@qq.com"
        },
        {
          date: "2018-09-26",
          name: "韩信",
          studentId: 2016127206,
          email: "839170766@qq.com"
        },
        {
          date: "2017-09-26",
          name: "项羽",
          studentId: 2016127206,
          email: "839170766@qq.com"
        },
        {
          date: "2015-09-26",
          name: "周盖",
          studentId: 2016127206,
          email: "839170766@qq.com"
        },
        {
          date: "2019-09-26",
          name: "黄瑜",
          studentId: 2016127207,
          email: "839170766@qq.com"
        },
        {
          date: "2019-09-26",
          name: "刘邦",
          studentId: 2016127208,
          email: "839170766@qq.com"
        },
        {
          date: "2019-09-26",
          name: "项羽",
          studentId: 2016127206,
          email: "aaa@163.com"
        },
        {
          date: "2019-09-26",
          name: "刘邦",
          studentId: 2016127206,
          email: "xxx@189.com"
        }
      ]
    };
  },
  mounted() {
    this.showList = this.dataList; //用dataList模拟后台返回的数据，赋值给该在页面上显示的数组
  },
  methods: {
    autosearch() {
      //当用户有输入关键字时才过滤数据
      if (this.searchVal !== "") {
        //只筛选一个条件时可用以下两条语句：
        // this.newList = this.dataList.filter( item => item.name.indexOf(this.searchVal) !== -1);
        // this.showList = this.newList;

        // 使用数组的filter方法将数组中含有搜索内容的每个对象都返回给newList存储
        this.newList = this.dataList.filter(
          item =>
            item.email.indexOf(this.searchVal) !== -1 ||
            item.date.indexOf(this.searchVal) !== -1 ||
            item.name.indexOf(this.searchVal) !== -1 ||
            // 由于indexOf方法返回的是字符在字符串中所在的索引值，而studentId的数据类型是number，
            //因此使用toString()方法先将对象中的学号转为字符串再使用indexOf方法
            item.studentId.toString().indexOf(this.searchVal) !== -1
        );
        // 当newList数据存在时，执行以下语句，把 过滤完的数组 赋值给 应该展示出来的数组
        if (this.newList) {
          this.showList = this.newList;
        }
      }
    },
    // 点击重置按钮后将input框置空，渲染展示初始数据
    resetDate() {
      this.searchVal = "";
      this.showList = this.dataList;
    }
  }
};
</script>