【vue2】实现查询功能详解

1、前言

vue项目中实现查询功能是最基本的操作。由于vue的动态绑定特性，我们可以在computed中新增方法，实现动态效果。

2、前端写法- --前端框架使用的是element-plus

 <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        @row-dblclick="rowDblclick"
        ref="tableData"
      >
<el-table>

js写法：

  computed: {
    //tableData为数组[]，且为表v-model绑定的参数名
    tableData() {
      var input = this.username;  //username为input中的v-model参数
      if (input) {
        return this.tableData.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(input) > -1;
          });
        });
      }
      return this.tableData;
    },
  }



//详细说明
上述代码中，this.tableData为数组，使用的方法是filter()。
通过该方法中定义过滤条件，可以实现将数组中所有满足条件的项组成一个新的数组B，
在不改变原数组A的情况下，返回数组B。
---1---
this.tableData.filter((data) => {...});
data为数组tableData中的一项，如果是[1,2,3]这种普通数组则为其中的基本数据类型的项；
如果是对象数组，那么data表示的是其他的一个对象{}。

---2---
前提：例子中的tableData数组为对象数组。Object.keys(data)表示获取对象的key值，
并组成一个数组。比如，{name:"张三",age:"20"},那么Object.keys(data)=["name","age"]。

---3---
some()方法是判断有无。也就是说，
如果key满足“String(data[key]).toLowerCase().indexOf(input) > -1;”这个条件，返回true，
那么说明该data是满足条件的，放入一个新的数组中。再次遍历tableData将所有满足条件的值都放入这个新数组中。并返回