avue 分页组件——假分页绑定数据

借鉴 https://blog.csdn.net/u014418725/article/details/79702001  Vue.js iView Page分页组件之假分页

使用vue的Page组件实现分页效果，从现实角度来说，肯定是真分页才有现实的价值，但是假分页也很重要。

真分页就是每次前段请求，后端拿到请求去调用接口查询数据库。

假分页就是前段一次请求，后端一次性查询所有或者固定页数，之后前段的请求全从之前拿到的里面分批给前段。

template页

                :data="tableData"

                :table-loading="tableLoading"

                :option="tableOption"

                :page="page"

                @size-change="sizeChange"

                @current-change="currentChange"

                @on-load="getList" >

     

script

data() {

      return {

        listdata:[],

        tableData: [],

        page: {

          total: 0, // 总页数

          currentPage: 1, // 当前页数

          pageSize: 10 // 每页显示多少条

        },

        tableLoading: false,

        tableOption: tableOption

      }

    },

    computed: {

      ...mapGetters(['permissions'])

    },

created() {

      request({

            url: 'http://localhost:8080/api/com.XXX.Card',

            method: 'get'

          }).then(response => {

            //console.log(JSON.stringify(response.data))

          let totalNum = 0;

          for(var i=0;i

            // console.log("res.data[i] is " + i + "\n " + JSON.stringify(response.data[i]))

            var object = eval(response.data[i])

            object.index = i+1;

            //console.log("i is " + i + "\n " + JSON.stringify(object));

            totalNum ++;

            this.listdata.push(object);

            // console.log(object)

            if(i

              this.tableData.push(object);

              }

              this.page.total = totalNum;

          }

          this.tableLoading = false

        }).catch(function (error) {

              alert(error);

            });

    },

methods: {

      getList(currentPage) {

        //console.log("当前页面页码是：" + currentPage)

              this.tableData.splice(0,this.tableData.length);

              for(var i = this.page.pageSize*(currentPage - 1) + 1;

                i<= ((this.page.total>this.page.pageSize*currentPage)?(this.page.pageSize*currentPage):(this.page.total));

                i++){

                this.tableData.push(this.listdata[i-1]);

              }

              this.tableLoading = false

      },   

      sizeChange(val) {

        this.page.currentPage = 1

        this.page.pageSize = val

        this.getList(this.page.currentPage)

      },

      currentChange(val) {

        this.page.currentPage = val

        this.getList(val)

        // this.$message.success('页码' + val)

      }, 

}