首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用vue-table2创建分页?

如何使用vue-table2创建分页?
EN

Stack Overflow用户
提问于 2018-08-13 23:23:57
回答 1查看 2.9K关注 0票数 1

我使用Vue-table2来呈现表格。https://github.com/ratiw/vuetable-2

代码语言:javascript
复制
 <vuetable ref="vuetable"
                    :api-url= "apiurl"
                    :fields="fields">
                  </vuetable>

我的服务器Api响应中没有任何分页响应。服务器返回的数据为

代码语言:javascript
复制
{
   "data":[
      {
         "id":22535,
         "message":"Message1",
         "message_type":"tag1",
         "time":"2018-08-13T14:41:57Z",
         "username":"rahuln"
      },
      {
         "id":22534,
         "message":"Message2",
         "message_type":"tag2",
         "time":"2018-08-13T14:02:27Z",
         "username":"govindp"
      },
      ..................
   ],
   "error":null,
   "success":true
}

这是我第一次使用Vue-js。如何在添加分页的同时仍然使用vue-table2。提前谢谢。

EN

回答 1

Stack Overflow用户

发布于 2018-08-14 00:10:59

因为你没有分页值,所以你必须插入它,我们将像这样欺骗vue-table

代码语言:javascript
复制
<template>
    <div>
        <vuetable ref="vuetable" api-url="/api/ahmed" :fields="fields" pagination-path="" @vuetable:pagination-data="onPaginationData" @vuetable:load-success="loadSuccess">
        </vuetable>
        <vuetable-pagination ref="pagination" @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
    </div>
</template>

<script>
    import Vuetable from 'vuetable-2/src/components/Vuetable'
    import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
    export default {
        components: {
            Vuetable,
            VuetablePagination,
        },
        data() {
            return {
                fields: ['name', 'email', 'birthdate', 'nickname', 'gender', '__slot:actions'],
                allData: false,
                currentPage: 1,
            }
        },
        mounted() {

        },
        methods: {
            onPaginationData(paginationData) {

                this.$refs.pagination.setPaginationData(paginationData)
            },
            loadSuccess(data) {

                this.$refs.vuetable.$nextTick(()=>{
                    if (!this.allData) {

                        this.allData = data;
                    }
                    if (!data.data.per_page) {
                        data = this.setData(this.currentPage);
                        this.$refs.vuetable.loadSuccess(data);
                    }
                })



            },
            setData(Page) {

                var data = JSON.parse(JSON.stringify(this.allData));
                var total = data.data.data.length;
                var perPage = 10;
                var currentPage = Page;
                var lastPage = parseInt(total / perPage) + ((total % perPage) === 0 ? 0 : 1)
                var from = parseInt((currentPage - 1) * perPage) + 1;
                var to = from + perPage - 1;

                to = to > total ? total : to;
                console.log(from,to)
                var newData = this.allData.data.data.filter(function(element, index) {

                    if (index >= from-1 && index <= to-1) {
                        console.log(index,from,to)
                        return true;
                    }

                    return false;
                })
                // console.log(newData)
                // return newData;

                data.data = {
                    "total": total,
                    "per_page": perPage,
                    "current_page": currentPage,
                    "last_page": lastPage,
                    "next_page_url": "",
                    "prev_page_url": null,
                    "from": from,
                    "to": to,
                    data: newData

                }
                // console.log(data)
                this.currentPage = Page;
                this.$refs.vuetable.loadSuccess(data);
                return data;
            },
            onChangePage(page) {


                this.setData(page);
            }
        }
    }
</script>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51825690

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档