vue+Element-ui实现分页效果实例代码详解

<div class="deit">  <div class="crumbs">   <el-breadcrumb separator="/">      <el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item>      <el-breadcrumb-item>用户列表</el-breadcrumb-item>    </el-breadcrumb>    <div class="cantainer">          <el-table style="width: 100%;"          :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" //对数据请求的处理，最为重要的一句话          >            <el-table-column type="index" width="50">              </el-table-column>            <el-table-column label="日期" prop="date" width="180">              </el-table-column>            <el-table-column label="用户姓名" prop="name" width="180">              </el-table-column>            <el-table-column label="邮箱" prop="email" width="180">              </el-table-column>            <el-table-column label="地址" prop="address" width="200">              </el-table-column>            </el-table>            <el-pagination              @size-change="handleSizeChange"              @current-change="handleCurrentChange"              :current-page="currentPage"              :page-sizes="[5, 10, 20, 40]" //这是下拉框可以选择的，每选择一行，要展示多少内容              :page-size="pagesize"     //显示当前行的条数              layout="total, sizes, prev, pager, next, jumper"              :total="userList.length">  //这是显示总共有多少数据，          </el-pagination>    </div>  </div> </div>

data () {   return {        currentPage:1, //初始页        pagesize:10,  //  每页的数据        userList: []   } },

created() {    this.handleUserList()  },  methods: {    // 初始页currentPage、初始每页数据数pagesize和数据data    handleSizeChange: function (size) {        this.pagesize = size;        console.log(this.pagesize) //每页下拉显示数据    },    handleCurrentChange: function(currentPage){        this.currentPage = currentPage;        console.log(this.currentPage) //点击第几页    },    handleUserList() {      this.$http.get('http://localhost:3000/userList').then(res => { //这是从本地请求的数据接口，        this.userList = res.body      })    }  }