vue表格讀取資料，搜尋表格、清空搜尋條件
阿新 • • 發佈：2018-11-22
用axios請求介面資料,用vue的形式顯示在表格中，搜尋表格中的資料，點按鈕清空搜尋條件
第一：html程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>宿舍衛生</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="css/mui.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="box"> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">宿舍衛生列表</h1> </header> <div class="mui-content"> <div class="white-bg mb10"> <div class="search" > <form class="search-group"> <div class="search-input-row"> <label>宿舍樓：</label> <select name="" v-model="searchCriteria.buildId"> <option v-for="build in buildDrop" :value="build.id">{{build.buildName}}</option> </select> </div> <div class="search-input-row"> <label>宿舍號：</label> <input v-model="searchCriteria.roomCode" placeholder="宿舍號"> </div> <div class="search-input-row"> <label>狀態：</label> <select name="" v-model="searchCriteria.situation"> <option value="1">優</option> <option value="2">良</option> <option value="3">中</option> <option value="4">差</option> </select> </div> <div class="search-button-row"> <button type="button" class="mui-btn mui-btn-primary" @click="search">搜尋</button> <button type="button" class="mui-btn" @click="clearSearchCriteria">清空</button> </div> </form> </div> </div> <div class="mui-clearfix"></div> <div class="white-bg"> <div class="mui-scroll-wrapper" id="pullrefresh"> <div class="mui-scroll"> <div class="table-head"> <table align="center"> <thead> <tr> <th>院系</th> <th>宿舍號</th> <th>標準</th> <th>狀態</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(tdData,index) in tableData"> <td>{{tdData.deptNameShort}}</td> <td>{{tdData.roomCode}}</td> <td>{{tdData.roomType}}</td> <td> <span class="mui-badge mui-badge-success" v-if="tdData.situation == 1">優</span> <span class="mui-badge-warning" v-else-if="tdData.situation == 2">良</span> <span class="mui-badge-warning" v-else-if="tdData.situation == 3">中</span> <span class="mui-badge mui-badge-danger" v-else-if="tdData.situation == 4">差</span> <span v-else class="mui-badge">無</span> </td> <td><button type="button" @click="cookiesRoomCode(tdData)" id="cookiesRoomCode" class="mui-btn mui-btn-primary mui-btn-outlined mui-btn-s">檢視</button></td> </tr> </tbody> </table> </div> <div class="loading">下拉載入更多</div> </div> </div> </div> </div> </div>
第二：JS部分
<script src="js/vue.js"></script> <script src="js/mui.min.js"></script> <script src="js/axios.min.js"></script> <script src="js/base.js"></script> <script type="text/javascript"> mui.init({ pullRefresh: {//下拉載入更多 container: '#pullrefresh', down: { style:'circle', callback: pulldownRefresh }, up: { //可選，正在載入狀態時，上拉載入控制元件上顯示的標題內容 contentrefresh: '正在載入...', //可選，請求完畢若沒有更多資料時顯示的提醒內容； contentnomore:'沒有更多資料了', //必選，重新整理函式 callback: pullupRefresh } } }); // var pageIndex = 1;//當前頁 // var totalPage = 3;//總頁數 var page = 1; //當前頁 var totalPage=0;//總頁數 /** * 下拉重新整理具體業務實現 */ function pulldownRefresh() { setTimeout(function() { myVue.renderTable(); console.log('下拉重新整理') mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); }, 1500); } /** * 上拉載入具體業務實現 */ function pullupRefresh() { if(totalPage == 1){ mui('#pullrefresh').pullRefresh().disablePullupToRefresh(); }else{ setTimeout(function() { mui('#pullrefresh').pullRefresh().enablePullupToRefresh(); mui('#pullrefresh').pullRefresh().endPullupToRefresh((++page > totalPage)); if(page <= totalPage){ console.log(page) myVue.renderTable(page); } }, 1500); } } var token = localStorage.getItem("token"); var myVue = new Vue({ el:'#box', data:{ buildDrop:[],//獲取樓下拉列表 tableData: [], searchCriteria: { buildId: "", roomCode: "", situation: "" }, params: {} }, mounted(){ this.renderTable(); this.getBuildDrop(); }, methods:{ renderTable(pageIndex) { // var page = 1; var limit = 10; var params = this.params; // params.page = page; if(pageIndex){ params.page = pageIndex; }else{ params.page = 1; } params.limit = limit; axios.get(baseUrl+'wx/health/ssroomhealth/hlist?token='+ token, { params }) .then(function (data) { console.log(data); if(data.status==200){ if (data.data.code == 0) { totalPage=data.data.page.totalPage; // console.log(myVue.tableData) if(pageIndex){ data.data.page.list.map((elem)=>{ myVue.tableData.push(elem) }) console.log(myVue.tableData) }else{ myVue.tableData = data.data.page.list; } } else { mui.toast(data.data.msg) } } }) }, getBuildDrop(){ axios.get(baseUrl+"wx/build/build/buildDrop?token="+ token).then(function (data) { if(data.status==200){ if (data.data.code == 0) { myVue.buildDrop = data.data.data; } else { mui.toast(data.data.msg) } } }) }, search() { myVue.params = { buildId: myVue.searchCriteria.buildId, roomCode: myVue.searchCriteria.roomCode, situation: myVue.searchCriteria.situation }; this.renderTable(); }, clearSearchCriteria() { myVue.params = { buildId: "", roomCode: "", situation: "" }; this.renderTable(); }, cookiesRoomCode(listData){ console.log(listData); // id:tdData.rid,roomCode:tdData.roomCode localStorage.setItem("id2",listData.rid); localStorage.setItem("roomCode2",listData.roomCode); // localStorage.setItem("listDatas",listData); mui.openWindow({ url: 'list-details.html', id:'cookiesRoomCode' }); } }, }); </script>