Vue+iview分页组件的简单使用

最新推荐文章于 2023-04-11 11:09:42 发布

public_c_lass

最新推荐文章于 2023-04-11 11:09:42 发布

阅读量973

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/public_c_lass/article/details/108638583

版权

vue+iview 分页组件

首先看看iview 分页组件的使用方法
1、:total是Page属性，为总条数
2、:current是Page属性，为当前页数
3、:page-size是Page属性，为当前显示数据条数
4、show-elevat对应html 图中跳至1页
5、show-sizer对应html图中10条/页
6、show-total对用html图中共58条
iview'

前台页面

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="assets/jquery-3.4.1.min.js"></script>
    <!-- import Vue.js -->
    <script src="//vuejs.org/js/vue.min.js"></script>
    <!-- import stylesheet -->
    <link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
    <!-- import iView -->
    <script src="//unpkg.com/view-design/dist/iview.min.js"></script>
</head>
<body>
<div id='app'>
    <input type="text" class="ivu-input" id="search" style="width: 400px">
    <i-button type="primary"  id="search" @click="openRecords">搜索一下</i-button>

    <div v-for="zbs in listObj">
        --id--{{zbs.id}} --关键字--{{zbs.keywords}}
    </div>

    <div id="pagetotal" style="display:none">
        <Page :total="dataCount"
              :current.sync="current"
              :page-size="pageSize"
              show-total class="paging"
              @on-change="changePage"></Page>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            current: 1,
            isShow: false,
            dataCount: 0,//总条数
            listObj: [],
            pageSize: 10,//每页显示数据条数
        },
        methods: {
            openRecords: function () {
                var id = document.getElementById("search");
                pageIndex = 0;
                var self = this;
                $.ajax({
                    url: "/book/queryByPage",
                    type: "POST",
                    data: {"pageIndex": pageIndex, "pageSize": self.pageSize},
                    success: function (data) {
                        var zb = JSON.parse(data.body.parameters.return);
                        var value = zb.content;
                        self.listObj = value;
                        self.dataCount = zb.totalElements;
                    }
                });
                $("#pagetotal").show();
            },

            changePage(index) {//页码改变触发的函数
                var self = this;
                //index当前页码
                var pageIndex = (index - 1) * this.pageSize;
                $.ajax({
                    url: "/book/queryByPage",
                    type: "POST",
                    data: {"pageIndex": pageIndex, "pageSize": self.pageSize},
                    success: function (data) {
                        var zb = JSON.parse(data.body.parameters.return);
                        var value = zb.content;
                        self.listObj = value;
                    }
                });
            },
        },
    })

</script>
</body>
</html>

后台代码

@RequestMapping("/book/queryByPage")
	public List<User> queryByPage() {
		List<User> zbZskData = userService.queryAll();
		return List;
	}
}

其他的service 实体类都很简单自己创建，到此vue+iview分页组件已经完成