netcoreMVC中使用Vue模板分页封装（不适合数据量大)

自己做了一个分页，方便应用于网站，因为分页在页面中不可缺少，常常使用，所以封装成一个模块，一处引用，每个页面都可以使用。

这种分页不是每次都从数据库中拿，而是在一开始就把所有数据都拿到了页面中，如果数据量大的化，不适合使用。

1、在视图下的Shared文件夹中创建文件： _pageHelper.cshtml

<template id="pageTemplate">
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li v-bind:class="{'disabled':isDisabledPrevious}">
                <a href="#" aria-label="Previous" v-on:click="previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="i in totalpage" v-on:click="pageClick" v-bind:class="{'active':i==curPage}"><a href="#">{{i}}</a></li>
            <li v-bind:class="{'disabled':isDisabledShowNext}">
                <a href="#" aria-label="Next" v-on:click="next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<script>
    Vue.component("wzhpage", {
        template: '#pageTemplate',
        props: {
            pagecount: Number,
            pagesize: {
                default: 15,
                type: Number
            },
        },
        data() {
            return {
                curPage: 1,
            }
        },
        computed: {
            isDisabledPrevious() {
                return this.curPage == 1;
            },
            isDisabledShowNext() {
                return this.curPage == this.totalpage;
            },
            totalpage() {
                return Math.ceil(this.pagecount/ this.pagesize) || 1;
            }
        },
        methods: {
            next() {
                if (!this.isDisabledShowNext) {
                    this.curPage++;
                    var para = { 'curPage': this.curPage, 'pageSize': this.pagesize };
                    this.$emit("sendcurpage", para);
                }
            },
            previous() {
                if (!this.isDisabledPrevious) {
                    this.curPage--;
                    var para = { 'curPage': this.curPage, 'pageSize': this.pagesize };
                    this.$emit("sendcurpage", para);
                }
            },
            pageClick(event) {
                this.curPage = event.target.innerHTML;
                var para = { 'curPage': this.curPage, 'pageSize': this.pagesize };
                this.$emit("sendcurpage", para);
            },
        }
    });

</script>

 

2、在各个模板页引用此页

 @{Html.RenderPartial("_pageHelper");}

 

3、在使用页中，使用自创的分页标签

 <wzhpage v-on:sendcurpage="goPage" v-bind:pagecount="datalist.length" v-bind:pagesize="pageSize"></wzhpage>

sendcurpage这是分页组件中定义的事件，指点击页面后把当前页和每页大小传递给父组件事件goPage。pagecount属性指总记录的个数（也有可能是查询后总记录的个数),pagesize指每页显示数据的个数，都是由父组件传递的值。

以上只要都不需要修改什么，直接拷贝到页面中即可。以下红色内容根据自己页面的情况分别拷贝进去，按需修改。

 

4、在使用页父组件中

　　

（1）查询条件

名称：<input placeholder="请输入查询名称" v-model.trim="searchKey"/><button v-on:click="searchKey=''">清空</button>

　

（2）js

 var app = new Vue({
        el: '#app',
        data: {
            
            materiallist: [],//从数据库在获取的数据，用自己定义的


            curPage: 1, // 当前页
            pageSize: 10,//每页显示数量
            searchKey:'',//查询条件
        },
        mounted: function () {
            this.$nextTick(function () {
                this.loadData();
            })
        },
        computed: {
            //通过计算属性获取要显示的数据
            showPageData() {
                var templist = this.datalist.slice(this.pageSize * (this.curPage - 1), this.pageSize * this.curPage);
                return templist;
            },
            //分页的所有数据，包括查询时自动模糊查找
            datalist() {
                this.curPage = 1;//查询时初始化当前页
                if (this.searchKey != "") {
                    var reg = new RegExp(this.searchKey);
                    return this.materiallist.filter(x => reg.test(x.name));
                } else {
                    return this.materiallist;
                }
            }，
        },
　　　　　methods: {
            loadData: function () {
                var me = this;
                axios.post("/home/getMeterial").then(function (res) {
                    me.materiallist = res.data;
                });
            },
            goPage(obj) {//从子组件更新当前页和页的大小
                this.curPage = obj.curPage;
                this.pageSize = obj.pageSize;
            },
    }
}）

 注意：

计算属性中两个属性，其中datalist中要添加自己从数据库中获取的数据，这一属性解决查询时得到数据集合，另一个showPageData是给要展示给用户的数据，把它加入到显示数据处，如下：

 

             <tr v-for="item in showPageData">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                         
              </tr>