vue.js实现分页查询

  • Z时代
  • 2024-01-10
  • 分类：IT

如何使用vue.js" title="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>

以上是 vue.js实现分页查询 的全部内容， 来源链接： utcz.com/p/200045.html

回到顶部