:-: **搜索的查詢功能** 有時候我們需要查詢數據的某一項或多項的數據，也就是進行數據的篩選。 這里我是基于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; } ~~~