1、template部分
2、component
方法和搜索
页数和每页条数改变重新请求：
页数显示一部分：
前台效果
完整的html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mypagetest</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="pagediv">
<mypage></mypage>
</div>
<template id="page-template">
<div>
businessIp<input type="text" v-model="businessIp">
virtualPcName<input type="text" v-model="virtualPcName">
<button @click="searchRecord">搜索</button>
<table>
<tr v-for="(task,index) in list">
<td>{{index}}</td>
<td>{{task.businessIp}}</td>
<td>{{task.mem}}</td>
<td><button style="background:red;" @click="deleteTask(task.businessIp)">删除</button></td>
</tr>
</table>
<ul>
<button class='inline' @click="prePage(cur)">上一页</button>
<button v-for="page in pages" class='inline' :class="{ 'active': cur == page}" @click="btnClick(page)">{{page}}</button>
<button class='inline' @click="nextPage(cur)">下一页</button>
go to<input type="number" v-model="cur">页
<select v-model="limit" id="select1">
<option value="20">20条/页</option>
<option value="30">30条/页</option>
<option value="40">40条/页</option>
</select>
<span>共{{total}}页</span>
</ul>
</div>
</template>
</body>
<script>
Vue.component('mypage', {
template:'#page-template',//这个地方是逗号,变成分号就没有用
data:function(){
return{
businessIp:'',
virtualPcName:'',
total:0,
limit:20,
cur:1,
list:[]
}
},
created:function(){
var vm=this;
axios.post('/reslist', {
'page':vm.cur,
'limit':vm.limit
})
.then(function (response) {
vm.total=Math.ceil(response.data.count/vm.limit);
vm.list=response.data.data;
})
.catch(function (error) {
console.log(error);
});
},
methods:{
deleteTask:function(index){
console.log(index);
this.list.splice(index,1);//没有$ 这个符号,记住
},
prePage:function(data){
if(this.cur!=1){
this.cur--;
}
},
nextPage:function(data){
if(this.cur!=this.total){
this.cur++;
}
},
btnClick:function(data){//页码点击事件
if(data !=this.cur){
this.cur = data;
}
},
searchRecord:function f() {
console.log(this.businessIp+this.virtualPcName);
}
},
watch: {
'cur':function (val, oldVal) {
var vm=this;
axios.post('/reslist', {
'page':this.cur,
'limit':vm.limit
})
.then(function (response) {
vm.total=Math.ceil(response.data.count/vm.limit);
vm.list=response.data.data;
})
.catch(function (error) {
console.log(error);
});
console.log('new: %s, old: %s', val, oldVal)
},
'limit':function (val, oldVal) {
var vm=this;
axios.post('/reslist', {
'page':this.cur,
'limit':vm.limit
})
.then(function (response) {
vm.total=Math.ceil(response.data.count/vm.limit);
vm.list=response.data.data;
})
.catch(function (error) {
console.log(error);
});
console.log('new: %s, old: %s', val, oldVal)
}
},
computed: {
pages:function(){
var left =1;
var right =this.total;
var ar = [];
if(this.total>=20){
if(this.cur >10 &&this.cur
left =this.cur -10;
right =Math.ceil(this.cur )+10;
}else{
if(this.cur<=10){//如果当前是3
left =1;
right =20;
}else{//这个else就是this.cur >=this.total-2, 比如，148 页，
right =this.total;
left =this.total -10;
}
}
}
while (left <=right){
ar.push(left);
left ++
}
return ar
}
}
}),
new Vue({
el:'#pagediv'
})
</script>
<style>
.inline{
display:inline-block;
}
.active{
background:blue;
}
</style>
</html>
网友评论