vue+element 分页关联表格

html

//table  表格
<el-table
        :data="tableData.slice((curPage -1)*pagesize,curPage*pagesize)"
        border
        style="width: 100%;margin-top:10px;"
      >
        <el-table-column prop="date" align="center" label="序号" width="70"></el-table-column>
 </el-table>
// 分页符　
  <el-pagination
          @size-change="handleSizeChange" //设置每页显示条数
          @current-change="handleCureentChange" //设置每页显示的数量
          :current-page.sync="curPage" //当前页数
          :page-size="pagesize"   //每页显示个数
          prev-text="上一页"
          next-text="下一页"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length" //总页数
        ></el-pagination>

重要的是 el-table 里的属性 ！！！el-table-column 里的数据不重要。数据随便。。。。

:data=“tableData.slice((curPage -1)pagesize,curPagepagesize)” 这个是关键

Js

data() {
    return {
      pagesize: 10, //每页显示个数     默认
      curPage: 1,   //当前页数         默认
      data:[],      //放数据的地方
    }
},

//显示数量
handleCureentChange(val) {
    this.curPage = val;
},
//每页显示条数                 
handleSizeChange(val){
    this.pagesize = val;
}

css

*{
木得
}

图解

当你点击下一页 和使用前往功能 会触发@current-change=“handleCureentChange” 事件。

是不是很简单，你学fei了吗。。。。。。

不是很详细，根据自己的需要进行修改。。。。。。。