如何使用vue.js进行分页查询？我用了element-ui 结合 vue.js说明。
文章图片
Html部分：
<
div id="example">
<
template>
<
el-table
:data="http://www.srcmini.com/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，就是第一页的意思。
文章图片
如果是实际项目中，数据是一个请求返回的页面，我们前端拿到手上的只是一个连接，那应该怎么办？
不同担心，在js文件中加入连接：
<
script type="text/javascript">
Vue.use(ELEMENT)
axios.defaults.baseURL = '数据路径'
<
/script>
然后再vue中再初始化数组list[ ].
new Vue({
el: '#app',
data: {
list: [],
pagesize: 10,
currpage: 1
})
【vue.js实现分页查询】最后别忘记了把表格上面的数组替换成你定义的数组的名称。
<
el-table :data="http://www.srcmini.com/list.slice((currpage - 1) * pagesize, currpage * pagesize)"
<
/el-table>
推荐阅读
- 限制element-ui 表格显示行数
- vue.js的组件和模板
- C语言简明教程（六）（字符串、常量和格式化输入输出实例详解）
- C语言遍历数组的两种方式
- 巫师故事3（狂猎的背后故事）
- 英雄传说（北美公布冷钢之路IV）
- 游戏评测（排他性的重要性正在下降）
- 索尼与Crunchyroll的交易据报道很快就以10亿美元的价格成交
- 《Apex传奇》第6季是迄今为止最具分裂性的季节