vue2.0实现分页组件

http://www.php361.com/index.php?c=index&a=view&id=4671

http://www.yanglajiao.com/article/sinat_36422236/79474987

最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下:

该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整:

首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没有什么太大的难度, 主要是解决父子组件之间值传递的问题

[源码] view plain

1. <template>  
2.   <nav>  
3.     <ul class="pagination">  
4.       <li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(current - 1)"> « </a></li>  
5.       <li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(1)"> 首页 </a></li>  
6.       <li v-for="p in grouplist" :class="{'active': current == p.val}"><a href="javascript:;"  
7.                                                                           @click="setCurrent(p.val)"> {{ p.text }} </a>  
8.       </li>  
9.       <li :class="{'disabled': current == page}"><a href="javascript:;" @click="setCurrent(page)"> 尾页 </a></li>  
10.       <li :class="{'disabled': current == page}"><a href="javascript:;" @click="setCurrent(current + 1)"> »</a></li>  
11.     </ul>  
12.   </nav>  
13. </template>  
14.   
15. <script type="es6">  
16.   export default{  
17.     data(){  
18.       return {  
19.         current: this.currentPage  
20.       }  
21.     },  
22.     props: {  
23.       total: {// 数据总条数  
24.         type: Number,  
25.         default: 0  
26.       },  
27.       display: {// 每页显示条数  
28.         type: Number,  
29.         default: 10  
30.       },  
31.       currentPage: {// 当前页码  
32.         type: Number,  
33.         default: 1  
34.       },  
35.       pagegroup: {// 分页条数  
36.         type: Number,  
37.         default: 5,  
38.         coerce: function (v) {  
39.           v = v > 0 "less">  
40.   .pagination {  
41.     overflow: hidden;  
42.     display: table;  
43.     margin: 0 auto;  
44.     /*width: 100%;*/  
45.     height: 50px;  
46.   
47.   li {  
48.     float: left;  
49.     height: 30px;  
50.     border-radius: 5px;  
51.     margin: 3px;  
52.     color: #666;  
53.   
54.   &  
55.   :hover {  
56.     background: #000;  
57.   
58.   a {  
59.     color: #fff;  
60.   }  
61.   
62.   }  
63.   a {  
64.     display: block;  
65.     width: 30px;  
66.     height: 30px;  
67.     text-align: center;  
68.     line-height: 30px;  
69.     font-size: 12px;  
70.     border-radius: 5px;  
71.     text-decoration: none  
72.   }  
73.   
74.   }  
75.   .active {  
76.     background: #000;  
77.   
78.   a {  
79.     color: #fff;  
80.   }  
81.   
82.   }  
83.   }  
84.   
85. </style>  

使用时, 在父组件中引入, 代码如下: 

[源码] view plain

1. <template>  
2.         <v-pagination :total="total" :current-page='current' @pagechange="pagechange"></v-pagination>  
3. </template>  
4.   
5. <script type="es6">  
6.   import pagination from '@/components/common/pagination/pagination'  
7. export default{  
8.     data(){  
9.  return {  
10.         total: 150,     // 记录总条数  
11.         display: 10,   // 每页显示条数  
12.         current: 1,   // 当前的页数  
13. },  
14.  methods: {  
15.      pagechange:function(currentPage){  
16.        console.log(currentPage);  
17.        // ajax请求, 向后台发送 currentPage, 来获取对应的数据  
18.   
19.      }  
20.    },  
21. components: {  
22.       'v-pagination': pagination,  
23.     }  
24. }  
25. </script>  

至此, 一个基于 vue2.0 的分页组件就完成了

...

1.模板 pagination.vue

<template>
        <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
  </div>
</template>
<script type="text/ecmascript-6">
let pageNum = 1;
    export default {
        props: {
            total: {
                type: Number,
                default: 0
            },
            currentPage: {
                type: Number,
                default: 1
            }
        },
        data() {
            return {
                pageSize: 10
            };
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                this.$emit('search', 1, this.pageSize);
            },
            handleCurrentChange(val) {
                pageNum = val;
                this.$emit('search', pageNum, this.pageSize);
            }
        }
    };
</script>

2.在父组件中引用，注册

<pagination @search="search" :total="total" :currentPage = "curPage"></pagination>

<script>
    import pagination from './../template/pagination.vue'
    export default {
        components:{
            "pagination":pagination,
        },
        data() {
            return {
                tableData: [],
                dataObj:{},
                curPage: 1,
                total:100,
                pageSize:10,
            }
        },
        created(){
            this.getData();
            console.log(this.$refs) 
        },
        methods: {
            getData(num,pageSize){
                let self = this;
                const params = new URLSearchParams();
                var startTime = self.value1[0];
                var endTime = self.value1[1];
                if(startTime == ''){
                    startTime = '';
                }else{
                    startTime = self.getTime(startTime);
                }
                if(endTime == ''){
                    endTime = ''
                }else{
                    endTime = self.getTime(endTime);
                }

                self.dataObj = {
                    userName:self.userName,
                    realName:self.realName,
                    isClose:self.isClose,
                    beginDate:startTime,
                    endDate:endTime
                }
                if(!num){
                    num = 1
                }
                if(!pageSize){
                    pageSize = 10
                }
                let data = self.param(self.dataObj,num,pageSize);
                params.append('param',data);
                if(process.env.NODE_ENV === 'development'){
                    self.url = '/s1/copUser/getUserList';
                };
                self.$axios.post(self.url, params).then((res) => {
                    self.tableData = res.data.data.list;
                    self.total = res.data.total;
                })
            },
            async search(pageNum1,pageSize1){
                let pageNum = this.curPage = (typeof (pageNum1) === 'number') ? pageNum1 : 1;
                if (pageSize1) {
                  this.pageSize = pageSize1;
                };
                let pageSize = pageSize1 || this.pageSize;
                this.is_search = true;
                this.getData(pageNum,pageSize);
            }
        }

    }

这样就能用了，不过要注意分页要和获得的数据做配合，拿到数据后要自己进行处理