vue表格读取数据，搜索表格、清空搜索条件
用axios请求接口数据,用vue的形式显示在表格中，搜索表格中的数据，点按钮清空搜索条件第一：html代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>宿舍卫生&l
·
用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>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)