微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

elementUI实现分页功能

<template>
  <div id="app">
    <el-table
    :data="tableData.slice((currentPage-1)*size,currentPage*size)">
    <el-table-column prop="date" label="日期"></el-table-column>
  </el-table>
    <!-- <span class="demonstration">完整功能</span> -->
    <el-pagination
      :current-page="currentPage"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
  </div>
</template>
 data() {
      return {
        currentPage:1,
        size:5,
        tableData: [   // 若干条数据
          {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
        }
        }

使用数组的slice方法截取数组,每次点击下一页实现翻页效果

tableData.slice((currentPage-1)*size,currentPage*size)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐