Vue form 表单提交表单提交+ajax异步请求异步请求+分页效果分页效果
主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8"/>
<title>异步参数上传</title>
<link rel="stylesheet" type="text/css" href="${ctx }/css/bootstrap.min.css" rel="external nofollow" >
<#--<link href="css/fileinput.css" rel="external nofollow" media="all" rel="stylesheet" type="text/css"/>-->
<link href="${ctx }/css/fileinput.css" rel="external nofollow" media="all" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="${ctx }/css/css.css" rel="external nofollow" />
<#--<link rel="stylesheet" type="text/css" href="${ctx }/css/style.css" rel="external nofollow" />-->
<link rel="stylesheet" type="text/css" href="${ctx }/css/subwelcome.css" rel="external nofollow" />
<script>var $context = {};
$context.ctx = '${ctx}';
$context.resources = '${ctx}/resources';
</script>
</head>
<body>
<div id="app" class="htmleaf-container">
<div class="container kv-main">
<br>
<div style="margin-left: 200px;" class="robot-b-name">
<a class=".btn btn-primary" href="">返回上传页面</a>
</div>
<br>
<form @submit.prevent="submit" class="well form-inline">
<input type="text" class="input-big" style="width: 500px" v-model.trim="batchInforRequestVO.appkey"
placeholder="请输入appkey">
<input type="text" class="input-group" style="width: 500px" v-model.trim="batchInforRequestVO.batchnum"
placeholder="请输入批次号">
<input type="hidden" class="input-group" style="width: 500px"
v-model.trim="batchInforRequestVO.currentPage">
<button type="submit" class="btn btn-info">查询</button>
</form>
<br>
<!--提示框公共部分begining-->
<div class="modal-mask" v-show="show">
<div class="modal-confirm">
<h4 class="confirm-header">
<i class="iconfont icon-questioncircle"></i> {{ title }}
</h4>
<div class="confirm-content">
{{ content }}
</div>
<div class="confirm-btns">
<#--<button class="btn" v-on:click="opt(1)">取 消</button>-->
<button class="btn btn-primary" v-on:click="opt(2)">确 定</button>
</div>
</div>
</div>
<br>
<!--提示框公共部分ending-->
<div class="modal-mask" v-show="showcontent">
<div class="modal-confirm">
<h4 class="confirm-header">
<i class="iconfont icon-questioncircle"></i> {{ title }}
</h4>
<div class="confirm-content">
{{ content }}
</div>
<div class="confirm-btns">
<#--<button class="btn" v-on:click="opt(1)">取 消</button>-->
<button class="btn btn-primary" v-on:click="opt(3)">确 定</button>
</div>
</div>
</div>
<div>查询结果</div>
<!-- TableBegining -->
<div>
<table class="table table-striped table-bordered table-condensed">
<tr>
<th>批次号</th>
<th>处理进度</th>
<th>文件名称</th>
<th>上传时间</th>
<th>请求方法</th>
<th>操作</th>
</tr>
<tr v-for="(batchInforResponseVO, index) in BatchInforResponseVO ">
<td>{{batchInforResponseVO.batchNum}}</td>
<td>{{batchInforResponseVO.processPercentage}}</td>
<td>{{batchInforResponseVO.channelName}}</td>
<td>{{batchInforResponseVO.inserTime}}</td>
<td>{{batchInforResponseVO.requestAddre}}</td>
<td><a id="opreat" v-on:click="defaultExport(index)" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导出 </a><a
v-on:click="redirectTo(index)" id="opreat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >自定义导出 </a></td>
</tr>
</table>
</div>
<!-- TableEnding -->
<!-- 分页部分Begining -->
<div class="span6" style="width:25%;margin-right: 10px;float: right;">
<div style="width: 500px;" id="DataTables_Table_0_length">
<span> 每页10条记录 当前页{{batchInforRequestVO.currentPage}}</span>  
<span>共{{totalPage}}页 <a id="previousPage" v-on:click="changePage(1)" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >←上一页</a>   <a
id="nextPage" v-on:click="changePage(2)" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页 →</a></span>
</div>
</div>
<!-- 分页部分Ending -->
</div>
</div>
</div>
</body>
<script type="text/javascript">