先说分页,一页显示十条数据,和后台商量了的是在地址后面拼一个字符串,拼1后台就返回第一页的数据展示在页面上。
如 http://xxx/attendance/record/1 后台直接返回第一页的 /2就是返回第二页的数据
<div style="text-align: center;margin-top: 20px">
<el-pagination
@current-change="handleCurrentChange"
:current-page="1"
layout="total, prev, pager, next"
:total="total" // total是一个全局变量,在第一次刷新页面请求到的所有数据就会进行判断,是后台返回的
>
</el-pagination>
</div>
handleCurrentChange (currentPage) { //点击页码,展示当前页码的数据
this.tableData.splice(0,10); //每点击的时候先把当页数据删掉
this.currentPage = currentPage; //页码
this.a = currentPage;
var url ='http://xxxx/attendance/record/stats/'+this.a;
this.axios.get(url).then((res) => {
for(let i =0;i<res.data.data.data.length;i++){ //数据渲染
let tableTemp={};
tableTemp.name=res.data.data.data[i].name;
tableTemp.location=res.data.data.data[i].location;
tableTemp.type=res.data.data.data[i].type;
tableTemp.time=res.data.data.data[i].time;
this.tableData.push(tableTemp);
}
})
},
关于查询,是请求一个拼接后的网址,如 http://xxx/attendance/record/1?name=“xxx”&age=“xx” 在后面拼接参数
这里是一个选择日期并输入框查询名字相关信息:
<div>
<el-date-picker
v-model="value1"
value-format="yyyy-MM" //返回的日期格式
type="month"
placeholder="请选择月份">
</el-date-picker>
<el-input v-model="name" placeholder="姓名"></el-input>
<el-button type="primary" v-on:click="getUsers">查询</el-button>
</div>
data里面一个是双向绑定输入框里面的值,condition是一个全局变量,用来存放拼接的参数
data(){
value:'',
value1:‘’,
condition:''}
方法中:
getUsers(){
this.condition=null; //让他为空,不然每次点击都会拼一次
var url = http://xxx/attendance/record/stats/1?';
if(this.value1.length !== 0){ //判断选没选日期
this.condition+= "&date=" +this.value1;
} //日期
if(this.value.length !== 0){ //判断输入框有没有输入名字
this.condition+= "&name=" +this.value;
} //名字
console.log(url+this.condition); //请求的地址出来了,按照正常方法请求就可以了
请求到的数据后台就返回过来了