分页器vue模板

在vue框架中：
https://mp.weixin.qq.com/s/oHRYOm12xZBLFVC0kH44EQ
在mako框架中：

<%inherit file="/base.html"/>

<%block name="content">
<div id="app">
    <Page :total="total_number" show-sizer :page-size="per_size" :page-size-opts="page_size_array"
          @on-change="page_change" @on-page-size-change="page_size_change"/>
</div>
</%block>
<script>
    Vue.prototype.$http = axios;
    Vue.use(iview);
    new Vue({
        el: '#app',
        data() {
            return {
                per_size: 5,
                page_size_array: [5, 10, 15, 20],
                total_number: 100,
                current_page: 1,
            }
        },
        methods: {
            page_change(value) {
                this.current_page = value
                this.$http.post('${SITE_URL}search_info_by_page/', {page: value, per_size: this.per_size}).then(res => {
                    if (res.data.result) {
                        //这里就是要展示数据的表格
                        this.data6 = res.data.message
                    } else {
                        this.$Message.error(res.data.message)
                    }
                })
            },
            //每次更换每页多少条数据时，如果当前页数为1，那么不会调用page_change，如果当前页数不为1，那么会调用page_change，置为1
            page_size_change(value) {
                this.per_size = value
                if (this.current_page === 1) {
                    this.$http.post(`search_info_by_page/`, {page: this.current_page, per_size: value}).then(res => {
                        if (res.data.result) {
                            //这里就是要展示数据的表格
                            this.data6 = res.data.message
                        } else {
                            this.$Message.error(res.data.message)
                        }
                    })
                } else {
                }
            },
        },
        mounted() {

        }
    })
</script>
<style></style>