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代码执行搜索逻辑,遍历搜索数组然后把符合条件的数组项再赋值给展示数组。展示数组还有一个作用,就是保存所有数据。这样,在用户不输入任何内容即搜索框为空的时候可以利用展示数组中的全部数据内容赋值给搜索数组,这样比较完善,


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

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

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值