<div id="app">
<i-table :columns="columns1" :data="historyData" height="700"></i-table>
<Page :total="dataCount" :page-size="pageSize" @on-change="changepage" show-sizer></Page>
</div>
<script>
var vue = new Vue({
el: '#app',
data (){
return {
//在脚本中,我们在表格中定义的数据和表头都需要在这里进行绑定,下面是一些假数据,其中Columns1中的title表示列明,key表示K-V中的标识
columns1: [
{
title: '用户名',
key: 'username'
},
{
title: '邮箱',
key: 'email'
},
{
title: '创建时间',
key: 'createTime'
},
{
title: '更新时间',
key: 'updateTime'
}
],
//接下来绑定数据,分别对应前面的列的key值来进行数据绑定
historyData: [],
// 初始化信息总条数
dataCount:0,
// 每页显示多少条
pageSize:10
}
},
methods: {
querytable(){
axios.get("/springboot/user/getUsers")//post也可以改成get,但需要对应服务端的请求方法
.then(function (response) {
// 保存取到的所有数据
this.dataCount = response.data.list.length;
// 初始化显示,小于每页显示条数,全显,大于每页显示条数,取前每页条数显示
if(response.data.list.length < this.pageSize){
this.historyData = response.data.list;
}else{
this.historyData = response.data.list.slice(0,this.pageSize);
}
})
.catch(function (error) {
alert(error);
});
},
changepage(index){
var _start = ( index - 1 ) * this.pageSize;
var _end = index * this.pageSize;
this.historyData = response.data.slice(_start,_end);
}
},
//当页面加载的时候执行
created () {
this.querytable();
}
});
</script>
已经渲染了数据源,为什么一直没有数据呢?
解决了,是在html里作用域的问题,异步执行未请求的时候已经复制了,换成jquery的ajax,async:false之后可以了