初识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下边。不然会没有反应的。
这里的标签是封装好的，为了观看方便，我把它的源码复制过来给大家讲清楚。下方高能请注意。
//iviewpage再次封装
var comPageT = '标签的有了新的认识，它就是加上两个隐藏域。 而且它的
：total :current :pagesize 这些属性的属性值的名称可以作为name属性来提交表单，也可以在js中接受对应的页码数据显示到页面上，可以说是功能强大。
vue代码：
vue代码首先就是在中new一个vue对象，el:表示绑定那个元素 #开头表示id .开头表示class
component是应用其他组件，这里不再一一赘述
data属性这里放的是页面需要的值，通过v-model从data中直接取。
data3: [
{
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: [
{
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}"
},
],
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
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 datas = tOrderRetrunApplyService.queryBySearch(entity);
if(entity.getPageSize()==null){
entity.setPageSize(10);
}
Page querSearchByPage = tOrderRetrunApplyService.querSearchByPage(entity);
List data=(List) querSearchByPage.getData();
//request.setAttribute("data", data);
return querSearchByPage;
}