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

  • 5
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值