iview page 分页和 table展示_iview分页page,每页显示多少条怎么传给后台-CSDN博客

本文链接：https://blog.csdn.net/weixin_47863531/article/details/115351123

iview提供page分页搭配 table进行分页和展示数据
一、分页数据展示如图
分页参数展示如图
tips:需要后端传入总条数total，页数pageNum，每页展示条数pageSize
table里要传入Data数据

二、引入组件

<head lang="en">
    <meta charset="UTF-8"/>
    <title>查询</title>
    <script th:src="@{/static/js/lib/jquery-1.11.3.min.js}"></script>
    <script th:src="@{/static/js/vue/vue.min.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/iview.css}">
    <script th:src="@{/static/js/vue/iview.js}"></script>
    <script th:src="@{/static/js/vue/axios.min.js}"></script>
    <script th:src="@{/static/js/vue/config.js}"></script>
    <script th:src="@{/static/js/util/util.js}"></script>
    <script th:src="@{/static/js/link.js}"></script>
</head>

三、引入page插件

<Page :total="pageCount" :current.sync="pageCurrent" :page-size-opts="detailPsOpts"  :page-size="pageSize"
@on-change="pageIndexChange" @on-page-size-change="pageSizeChange" show-elevator show-sizer show-total    loading/>

TIPS：插件参数解释说明：
1、total–总页数
2、current–当前页
3、page-size–当前页显示大小
4、show-elevator–对应图中跳至多少页
5、show-sizer–对应图中多少每页
6、show-total–对应图中总条数
API展示如图：
在这里插入图片描述
四、初始化数据展示

data:{
 pageCount: 0,
 pageIndex: 1,
 pageSize: 10,
 pageCurrent: 1,
 detailPsOpts: [10, 20, 30, 40],
 result: [{}],//用来定义查询得数据
 columns:[],//接受表头信息
}

五、tabel插件

<Row :gutter="1" style="margin-top: 6px">
<i-table height="600" :columns="columns" :data="result"   ref="table"></i-table></Row>

数据：
table展示数据表头，result是后端回传的data

detailColumns: [//明细
                {
                    type: 'selection',
                    width: 50,
                    align: 'center',
                    fixed: 'left',
                    key: 'isNow'
                },
                {
                    title: '序号',
                    type: 'index',
                    width: 80,
                    align: 'center'
                },
                {

                    title: '名称',
                    width: 300,
                    key: 'insuranceCompanyName',
                    sortable: true
                },]

六、数据交互

queryClick: function () {
	this.pageIndex = 1;
    this.pageSize = 10;
    this.pageCurrent = 1;
    this.queryDetail();
            },
queryDetail: function () {               if(this.tbout.startDate==null||this.tbout.startDate==''){
    this.$Message.warning('请选择开始时间');
    return;
}             if(this.tbout.endDate==null||this.tbout.endDate==''){
	this.$Message.warning('请选择结束时间');
    return "";
}
    this.$Spin.show();
    var param = this.getDetailPara();
    var url = '/manager/tbout/queryList';
    var vmm = this;
    this.query(url, param).then(function (res) {
    	vmm.$Spin.hide();
    	vmm.result="";
   	    vmm.columns=vmm.censusColumns;
   	    vmm.result = res.data.data;
   	    }
getDetailPara: function () {
	let param = new URLSearchParams();
    param.append('pageIndex', this.pageIndex);//当前页
    param.append('pageSize', this.pageSize);
	return param;
},
pageIndexChange: function (value) {
	this.pageIndex = value;
	this.queryDetail();
            },
pageSizeChange: function (value) {
	this.pageSize = value;
	this.queryDetail();
            },

TIPS：配上其他

object:
 	private int limitStart;
    private int pageIndex;        //当前页码
    private int pageSize;  
object.setLimitStart((object.getPageIndex()-1)*object.getPageSize());

sql:limit #{limitStart},#{pageSize}