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将所有满足条件的值都放入这个新数组中。并返回
