:-: **搜索的查询功能** 有时候我们需要查询数据的某一项或多项的数据，也就是进行数据的筛选。 这里我是基于vue的前端UI框架iview来写的。 HTML代码如下： ~~~ <Col span="24"> <Card> <p slot="title" class="head-con"> <span class="p-title"> <Icon type="ios-list"></Icon> 答题人数统计 </span> <span class="search-con"> <Input v-model="searchName" placeholder="请输入姓名、手机号、试卷名搜一搜..." clearable style="width: 250px" /> <Button type="primary" icon="search" @click="bindChange(searchName)">搜索</Button> </span> </p> <Row> <Table stripe :columns="columns1" :data="data1"></Table> <Row class="page-right"> <Page :total="pageTotal" show-elevator show-total @on-change="pageChange"></Page> </Row> </Row> </Card> </Col> ~~~ **:columns**代表数据的表头， **:data**这里存放我们渲染的数据 这里主要是提供了**两种方法**，方法一：js代码如下： ~~~ // 封装请求的方法 search (data, argumentObj) { let res = data; let dataClone = data; for (let argu in argumentObj) { if (argumentObj[argu].length > 0) { res = dataClone.filter(d => { return d[argu].indexOf(argumentObj[argu]) > -1; }); dataClone = res; } } return res; }, // 搜索按钮事件 bindChange: function(e){ //基本的结构是这样：渲染数据 = （总数据，请求的参数） // 匹配用户名 this.data1 = (this，allData, {userName: e}) } ~~~ 方法二： （自己写的比较简单的方法，可以请求多类型的数据） ~~~ bindChange: function(e){ let res = this.allData; let dataClone = []; for(let obj in res){ // 匹配用户名 if(res[obj].userName == e){ dataClone.push(res[obj]) } // 匹配手机号 else if(res[obj].phone == e){ dataClone.push(res[obj]) } // 匹配试卷名 else if(res[obj].cname == e){ dataClone.push(res[obj]) } } this.data1 = dataClone; this.pageTotal = this.data1.length; } ~~~