Vue2 搜索框搜索表格内容 展示数据（ElementUI）

        最近有一个需求，要求页面中的搜索框，搜索表格数据，我这边做了一个demo，大家看一下

        这边用的是vue2加上elementui中的table表格和input输入框

---

首页先把所有代码贴上

<template>
  <div class="about">
    <el-input
      placeholder="请输入内容"
      v-model="inputVal"
      @keyup.enter.native="Search_table()"
      clearable
    >
    </el-input>
    <el-table :data="tableData">
      <el-table-column prop="city" label="城市" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { tableData } from "../mock/tablelist";
export default {
  data() {
    return {
      inputVal: "",
      showTable: [],
      tableData: [],
    };
  },
  methods: {
    Search_table() {
      const Search_List = [];
      let res1 = this.inputVal;
      const res = res1.replace(/\s/gi, "");
      let searchArr = this.showTable;
      searchArr.forEach((e) => {
        let city = e.city;
        let name = e.name;
        let age = e.age;
        if (city.includes(res)) {
          if (Search_List.indexOf(e) == "-1") {
            Search_List.push(e);
          }
        }
        if (name.includes(res)) {
          if (Search_List.indexOf(e) == "-1") {
            Search_List.push(e);
          }
        }
        if (age.includes(res)) {
          if (Search_List.indexOf(e) == "-1") {
            Search_List.push(e);
          }
        }
      });
      this.tableData = Search_List;
    },
  },
  watch: {
    inputVal(item1, item2) {
      if (item1 == "") {
        this.tableData = this.showTable;
      }
    },
  },
  mounted() {
    this.showTable = tableData;
    this.tableData = tableData;
  },
};
</script>
<style lang="scss" scoped>
.about {
  width: 100%;
  height: 100%;
  .el-input {
    width: 300px;
  }
  .el-table {
    width: 500px;
    margin: 0 auto;
  }
}
</style>

        在mock文件下新建一个tablelist.js文件用来模拟从后端请求过来的数据

         下面是写的假数据，

export const tableData= [
    { city: "上海", name: "小明", age: "18" },
    { city: "大连", name: "小丽", age: "21" },
    { city: "南京", name: "刘华强", age: "21" },
    { city: "广州", name: "周星驰", age: "4" },
    { city: "杭州", name: "张学友", age: "31" },
    { city: "西安", name: "小李飞刀", age: "210" },
  ]

---

接着来说一下思路

        table表格中展示的数据，肯定是从后端请求过来的数据，这里我造了一个假的数据，并且在

mounted函数中赋值给两个数组，如代码：

  mounted() {
    this.showTable = tableData;
    this.tableData = tableData;
  },

tableData数组是用来给table表格组件遍历数据用的

showTable数组是用户在输入内容的时候遍历查找的那个数组

        页面初始化的时候，拿到数据，然后赋值给两个数组，一个用来展示，一个用来搜索，用户输入搜索内容之后，js代码执行搜索逻辑，遍历搜索数组然后把符合条件的数组项再赋值给展示数组。展示数组还有一个作用，就是保存所有数据。这样，在用户不输入任何内容即搜索框为空的时候可以利用展示数组中的全部数据内容赋值给搜索数组，这样比较完善，

---

以上就是这次需求所用到的方法，如果有更好的方法欢迎评论交流和指导

这个二维码是一个前端交流群，欢迎进群讨论前端技术