个性化阅读
专注于IT技术分析

vue.js实现分页查询

如何使用vue.js进行分页查询?我用了element-ui 结合 vue.js说明。

vue分页-01

Html部分:

<div id="example">
<template>
<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
style="width: 100%"
>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>

<el-pagination background 
layout="prev, pager, next, sizes, total, jumper"
:page-sizes="[5, 10, 15, 20]"//每页展示条选择组件
:page-size="pagesize"//每页展示条
:total="tableData.length"
@current-change="handleCurrentChange" // currentPage改变时会触发
@size-change="handleSizeChange" //pagesize改变时触发
>
</el-pagination>
</template>
</div>

表格中的属性data的算法是运用了slice()方法返回的是一个数组。就是要限制每页显示的行数。

Vue.js部分:

<script>
new Vue({
el: '#example',
data() {
return {
 pagesize: 5,
currentPage:1,
tableData: [...
],// 数组

}
},
methods: {
                handleCurrentChange(cpage) {
                    this.currentPage = cpage;
                },
                handleSizeChange(psize) {
                    this.pagesize = psize;
                },
},
})
</script>

pagesize属性是设置每页显示的行数,currentPage是当前页数,初始化是1,就是第一页的意思。

vue分页完成-02

如果是实际项目中,数据是一个请求返回的页面,我们前端拿到手上的只是一个连接,那应该怎么办?

不同担心,在js文件中加入连接:

 <script type="text/javascript">
    Vue.use(ELEMENT)
axios.defaults.baseURL = '数据路径'
  </script>

然后再vue中再初始化数组list[ ].

new Vue({
      el: '#app',
      data: {
        list: [],
        pagesize: 10,
        currpage: 1
      })

最后别忘记了把表格上面的数组替换成你定义的数组的名称。

<el-table :data="list.slice((currpage - 1) * pagesize, currpage * pagesize)"
</el-table>
赞(0) 打赏
未经允许不得转载:srcmini » vue.js实现分页查询
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏