初识Vue.js 利用iview实现分页查询和条件查询
易星纬
最近新项目前端框架用的jquery+vue+iview 起初可以说是对vue一无所知，但是，经过近十天的应用，也掌握了一些东西，今天主要梳理一下关于自己今天用到vue做查询和分页，用于分享给大家以及给自己以后作为review。废话不说，直接怼代码。
前台页面如下：
这些标签是基于vue语法封装来的。其中v-model属性用来对标签内容的数据的双向绑定，相对于传统的documnet.getElements，and $("#id")有着更方面更快捷的效果，如果你不懂这些，可以去这里学习一下初识Vue.js。
其中标签的name属性和传统标签的name属性大同小异。可能有些语法刚开始学习的童鞋看不同，这里我给大家举个栗子。
@click.native="search"这里的意思就是给当前标签绑定一个点击事件，事件名称叫做search，这个search需要注册到指定的地方，下边的vue代码我已经给大家标红。大家可以先去看看。这里的方法一定要注册到methods下边。不然会没有反应的。
<div class="pageDiv">
<!--<span class="redSpanLeft color666666"><span class="gthaoImg"><img src="../img/gthao.png"/></span>定期采集规则 : 每周三 0.00 ~ 24.00 <span class="color08B45F">修改</span></span>-->
<com-page :total="pagetotal" :current="pageNo" :pagesize="pageSize"></com-page>
</div>这里的标签是封装好的，为了观看方便，我把它的源码复制过来给大家讲清楚。下方高能请注意。
//iviewpage再次封装
var comPageT = '<div style="float: right;clear: both;position: absolute;right: 20px"><div style="display: inline-block;height:41px;line-height: 41px"><Page placement="top" :show-total="showtotal" :page-size="pagesize" :current="current" :total="total" @on-page-size-change="handlePageSize" @on-change="handlePage" size="small" show-elevator show-sizer></Page></div>\
<input type="hidden" name="pageNo" :value="pageNo" id="pageNo"/>\
<input type="hidden" name="pageSize" :value="pageSize" id="pageSize"/></div>';<com-page>标签的有了新的认识，它就是加上两个隐藏域。而且它的
：total :current :pagesize 这些属性的属性值的名称可以作为name属性来提交表单，也可以在js中接受对应的页码数据显示到页面上，可以说是功能强大。
<form id="submitform" method="post" action="xxx/tOrderRetrunApply/searchlist.do" >
<!--内容开始-->
<div id="app" class="content" v-cloak>
<div class="comTitle">
<span class="titleFont">退货退款管理</span> <span class="titleRight">
<btn-icon ismin="true" @click.native="exportlist" ismin="true"
title="导出"></btn-icon>
</span>
</div>
<!--检索-->
<div class="retrievalDiv">
<span class="retrievalSpanF">
<div class="someFont">退货单号</div> <br /> <i-input placeholder="请输入"
class="comLiIInput" v-model="all.returnNo" name="returnNo"></i-input>
<!-- <input type="hidden" name="returnNo" id="returnNo" v-model="all.returnNo"/> -->
</span> <span class="retrievalSpan">
<div class="someFont">订单号</div> <br />
<i-input placeholder="请输入" class="comLiIInput" v-model="all.orderDtNo" name="orderDtNo"></i-input>
<!-- <input type="hidden" id="orderDtNo" v-model="all.orderDtNo" /> -->
</span> <span class="retrievalSpan">
<div class="someFont">退款状态</div> <br /> <i-select
style="width:120px" v-model="all.returnStatus" name="returnStatus"> <i-option
v-for="item in items" :value="item.value" :key="item.message">{{
item.message }}</i-option> </i-select>
<!-- <input type="hidden" v-model="all.returnStatus" id="returnStatus"/> -->
</span> <span class="retrievalSpanF">
<div class="someFont">兑换人</div> <br /> <i-input placeholder="请输入"
class="comLiIInput" v-model="all.returnApplyUser" name="returnApplyUser" ></i-input>
<!-- <input type="hidden" v-model="returnApplyUser" id="returnApplyUser" /> -->
</span>
<div class="retrievalSpan specialTime">
<div class="someFont">退货时间</div>
<br />
<input type="hidden" v-model="all.time" id="time"/>
<!--<Date-picker type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></Date-picker>-->
<com-time timeend="" timestart=""
timeendid="starDate" timestartid="starDate" timestartname="starDate"
timeendname="endDate" v-model='all.time'></com-time>
</div>
<span class="retrievalSpanF"> <btn-accept ismin="true"
title="检索" @click.native="search" title="新增"></btn-accept>
</span> <span class="retrievalSpan"> <btn-little title="重置"
@click.native="reset"></btn-little>
</span>
</div>
<!--列表-->
<div class="listDataDiv">
<div class="integralListDiv">
<com-table :loading="false" :columns="columns2" :data="data3"
:type="0"></com-table>
<div class="pageDiv">
<!--<span class="redSpanLeft color666666"><span class="gthaoImg"><img src="../img/gthao.png"/></span>定期采集规则 : 每周三 0.00 ~ 24.00 <span class="color08B45F">修改</span></span>-->
<com-page :total="pagetotal" :current="pageNo" :pagesize="pageSize"></com-page>
</div>
</div>
</div>
</div>
</form>vue代码：
vue代码首先就是在<script></script>中new一个vue对象，el:表示绑定那个元素 #开头表示id .开头表示class
component是应用其他组件，这里不再一一赘述
data属性这里放的是页面需要的值，通过v-model从data中直接取。
data3: [
<c:forEach items="${data}" var="list">
{
orderDtlId:"${list.orderDtlId}",
returnApplyId:"${list.returnApp_Id}",
returnNo:"${list.returnNo}",
returnServiceName:"${list.returnServiceName}",
orderDtlNo:"${list.orderDtlNo}",
returnApplyUser:"${list.returnApplyUser}",
returnApplyCause:"${list.returnApplyCause}",
returnDate:"${list.returnDate}",
returnStatus:"${list.returnStatus}",
pageSize:"${list.pageSize}",
pageNo:"${list.pagenNo}"
}, var _vue=new Vue({
el: '#app',
components: {
// 引用组件
'btnAccept': Vue.btnAccept,
'btnMessage': Vue.btnMessage,
'btnCancle': Vue.btnCancle,
'btnIcon': Vue.btnIcon,
'btnTitle': Vue.btnTitle,
'norSelect': Vue.norSelect,
'btnLittle': Vue.btnLittle,
'btnArrow': Vue.btnArrow,
'timeChoose': Vue.timeChoose,
'checkSelect': Vue.checkSelect,
'comPage': Vue.comPage,
'myinput': Vue.myinput,
'comTime': Vue.comTime,
'comIframe': Vue.comIframe,
'comTable': Vue.comTable
},
data: function data() {
return {
all:{
},
test1: '',
test2: '',
isshow: true,
mySelect: '',
chooseIndex: false,
retrieval: {},
data1: [],
columns2: [{
title: '退货单号',
key: 'returnNo',
className: "tableLeft color08B45F",
fixed: 'left',
isAuto: "1",
}, {
title: '服务名称',
key: 'returnServiceName',
}, {
title: '订单号',
key: 'orderDtlNo',
}, {
title: '兑换人',
key: 'returnApplyUser',
}, {
title: '退款理由',
key: 'returnApplyCause',
}, {
title: '退货时间',
key: 'returnDate',
}, {
title: '退款状态',
render: function render(h, params) {
return h('div', [h('p', {
"class": {
somezfwc: true,
isHidden: params.row.returnStatus != "0"
}
}, ''), h('p', {
"class": {
somefwwc: true,
isHidden: params.row.returnStatus != "1"
}
}, ''), h('p', {
"class": {
somesqtk: true,
isHidden: params.row.returnStatus != "2"
}
}, ''), h('p', {
"class": {
someStatus1: true,
isHidden: params.row.returnStatus != "3"
}
}, ''), h('p', {
"class": {
someStatus1: true,
isHidden: params.row.returnStatus != "4"
}
}, ''), h('p', {
"class": {
comMore4: true,
isHidden: params.row.returnStatus != "0"
}
}, ' '), h('p', {
"class": {
comMore4: true,
isHidden: params.row.returnStatus != "1"
}
}, '待处理'), h('p', {
"class": {
comMore4: true,
isHidden: params.row.returnStatus != "2"
}
}, '已确认'), h('p', {
"class": {
comMore4: true,
isHidden: params.row.returnStatus != "3"
}
}, '已拒绝'), h('p', {
"class": {
comMore4: true,
isHidden: params.row.returnStatus != "4"
}
}, '已撤销')]);
}
}, {
title: '退款状态',
key: 'returnStatus',
render: function render(h, params) {
return h('div', [h('p', {
"class": {
comMore3: true,
isHidden: params.row.returnStatus != "1"
},
on: {
click: function click() {
console.log(params);
var returnappid= params.row.returnApplyId;
var orderid= params.row.orderDtlId;
window.location.href="${pageContext.request.contextPath}/orderRetrun/tOrderRetrunApply/operation.do?returnAppId="+returnappid+"&orderDtlId="+orderid+"";
}
}
}, '处理'), h('p', {
"class": {
comMore3: true,
isHidden: params.row.returnStatus == "1"
},
on: {
click: function click() {
var returnappid= params.row.returnApplyId;
var orderid= params.row.orderDtlId;
window.location.href="${pageContext.request.contextPath}/orderRetrun/tOrderRetrunApply/operation.do?returnAppId="+returnappid+"&orderDtlId="+orderid+"";
}
}
}, '详情')]);
}
}],
data3: [
<c:forEach items="${data}" var="list">
{
orderDtlId:"${list.orderDtlId}",
returnApplyId:"${list.returnApp_Id}",
returnNo:"${list.returnNo}",
returnServiceName:"${list.returnServiceName}",
orderDtlNo:"${list.orderDtlNo}",
returnApplyUser:"${list.returnApplyUser}",
returnApplyCause:"${list.returnApplyCause}",
returnDate:"${list.returnDate}",
returnStatus:"${list.returnStatus}",
pageSize:"${list.pageSize}",
pageNo:"${list.pagenNo}"
},
</c:forEach>
],
items: [{
message: '请选择',
value: '0'
}, {
message: '待处理',
value: '1'
}, {
message: '已确认',
value: '2'
}, {
message: '已拒绝',
value: '3'
},
{
message: '已撤销',
value: '4'
}],
data2: [
],
isblue: false,
tabIndex: 0
};
},
methods: {
changesize:function changesize(){
},
reset :function(){
$("#submitform")[0].reset();
},
toEdit: function toEdit() {},
save: function save() {},
changeShow: function changeShow() {},
changeChoose: function changeChoose(index) {
this.chooseIndex = index;
},
togzt: function togzt(value) {
console.log(value);
this.tabIndex = value;
},
change: function change(value) {
console.log(value);
},
search: function search(){
var datas= this;
var temp=this;
var timestart=$("#timestartid").val();
alert(timestart);
$.ajax({
url:"${pageContext.request.contextPath}/orderRetrun/tOrderRetrunApply/searchlist.do",
method:"post",
dataType:"json",
data:{
returnNo:this.all.returnNo,
orderDtNo:this.all.orderDtNo,
returnStatus:this.all.returnStatus,
returnApplyUser:this.all.returnApplyUser,
starDate:Vue.$formatmyyear(this.all.time[0]),
endDate:Vue.$formatmyyear(this.all.time[1]),
pageSize:10,
pageNo:1
},
success:function(page){
var data = page.data;
var _data =[];
if(data){
for(var i=0;i<data.length;i++){
var item = data[i];
var _dataItem={returnNo:item.RETURNNO,
returnServiceName:item.RETURNSERVICENAME,
orderDtlNo:item.ORDERDTLNO,
returnApplyUser:item.RETURNAPPLYUSER,
returnApplyCause:item.RETURNAPPLYCAUSE,
returnDate:item.RETURNDATE,
returnStatus:item.RETURNSTATUS
};
_data[i]=_dataItem;
}
}
datas.data3=_data;
datas.pagetotal=page.totalCount;
datas.pagecurrent = page.pageNo;
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
}
});
},
exportlist: function exportlist(){
var returnNo1=this.all.returnNo;
if(!returnNo1)
{
returnNo1=null;
}
var orderDtNo1=this.all.orderDtNo;
if(!orderDtNo1)
{
orderDtNo1="";
}
var returnStatus1=this.all.returnStatus;
if(!returnStatus1)
{
returnStatus1= "";
}
var returnApplyUser1=this.all.returnApplyUser;
if(!returnApplyUser1)
{
returnApplyUser1= "";
}
var starDate1=Vue.$formatmyyear(this.all.time[0]);
if(!starDate1)
{
starDate1= "";
}
var endDate1=Vue.$formatmyyear(this.all.time[1]);
if(!endDate1){
endDate1= "";
}
window.location.href="${pageContext.request.contextPath}/orderRetrun/tOrderRetrunApply/exportlist.do?returnNo="+returnNo1+"&orderDtNo="+orderDtNo1+"&returnStatus="+returnStatus1+"&returnApplyUser="+returnApplyUser1+"&starDate="+starDate1+"&endDate="+endDate1+"";
},
},
created: function created() {},
mounted: function mounted() {
},
});后台代码：
这里就不多说了就是springmvc接受form参数啦，后边进行业务处理。
@ResponseBody
@RequestMapping("/searchlist")
@SuppressWarnings("unchecked")
public Page searchList(TreturnOrderSearchVo entity,RedirectAttributes redirectAttributes,HttpServletRequest request)
{
// List<TreturnSearchResult> datas = tOrderRetrunApplyService.queryBySearch(entity);
if(entity.getPageSize()==null){
entity.setPageSize(10);
}
Page querSearchByPage = tOrderRetrunApplyService.querSearchByPage(entity);
List<TreturnSearchResult> data=(List<TreturnSearchResult>) querSearchByPage.getData();
//request.setAttribute("data", data);
return querSearchByPage;
}
类似资料：