axios post get 请求数据传参数分页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue test</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
<div class="block" v-for="item in datalist" :key="item.id">
{{item.id}}----{{ item.ar_title }}----
</div>
<template>
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[13, 23, 33, 43,53]"
:page-size="13"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
</div>
</body>
<!-- import Vue before Element -->
<!--<script src="https://unpkg.com/vue@2/dist/vue.js"></script>-->
<script type="text/javascript" src="<?php echo '/themes/default/frontend/js'?>/vue.js"></script>
<!-- import JavaScript -->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script type="text/javascript" src="<?php echo '/themes/default/frontend/js'?>/element.js"></script>
<!-- import axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
visible: false,
currentPage1: 5,
currentPage2: 5,
currentPage3: 5,
currentPage4: 1,
total:300,
page:1,
limit:13,
datalist:[],
}
},
methods: {
handleSizeChange(val) {
//console.log(`每页 ${val} 条`);
axios.get("/show_list/ajax_list/MjM",{params:{page:this.page,limit:val}}).then(res=>{
this.limit = val;
this.total = res.data.total;
this.datalist = res.data.data;
//console.log(res.data);
});
//由于this在回调函数中指向不同并非是vue实例所以先赋值给_this
/*var _this=this
axios({
method: 'post',
url: '/show_list/ajax_list/MjM',
headers:{
//转义数据格式，否则后端接收不到参数
'Content-Type':'application/x-www-form-urlencoded'
},
data: {
page: this.page,
limit: val,
},
}).then(function (response) {
console.log(response.data);
let result =response.data.data;
_this.limit = val;
_this.total = response.data.total;
_this.datalist = result;
});*/
},
handleCurrentChange(val) {
//console.log(`当前页: ${val}`);
axios.get("/show_list/ajax_list/MjM",{params:{page:val,limit:this.limit}}).then(res=>{
this.page = val;
this.total = res.data.total;
this.datalist = res.data.data;
//console.log(res.data);
});
//由于this在回调函数中指向不同并非是vue实例所以先赋值给_this
/*var _this=this
axios({
method: 'post',
url: '/show_list/ajax_list/MjM',
headers:{
//转义数据格式，否则后端接收不到参数
'Content-Type':'application/x-www-form-urlencoded'
},
data: {
page: val,
limit: this.limit,
},
}).then(function (response) {
console.log(response.data);
let result =response.data.data;
_this.page = val;
_this.total = response.data.total;
_this.datalist = result;
});*/
},
getData(){
return axios.get('/show_list/ajax_list/MjM');
//return axios.get('http://www.yi.com/show_list/ajax_list/MjM').then(res=>{
//console.log(res.data.data);
//this.total = res.data.total
//this.datalist = res.data.data;
//return res.data;
//});
}
},
mounted(){
this.getData().then(res=>{
this.total = res.data.total;
this.datalist = res.data.data;
});
}
})
</script>
</html>
发表评论