vue iview table绑定数据源无效问题

<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>

图片描述

图片描述

已经渲染了数据源,为什么一直没有数据呢?

阅读 3.8k
1 个回答

解决了,是在html里作用域的问题,异步执行未请求的时候已经复制了,换成jquery的ajax,async:false之后可以了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题