element-ui中表格和分页的关联使用

202 阅读1分钟
<el-table
        :data="tableData.slice((currentpage - 1) * pagesize, currentpage * pagesize)"
        border
        style="width: 100%"
        size="small"
        >
</el-table>

<el-pagination
      class="msg-pagination-container"
      :page-size="pagesize"
      background
      layout="prev, pager, next"
      :total="tableData.length"
      @current-change="handleCurrentChange"
    >
</el-pagination>


export default{
  data(){
    return{
      tableData:[...],
      currentpage: 1,
      pagesize: 10,
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentpage = val;
      this.cardData = this.tableData.slice((this.currentpage - 1) * this.pagesize,
      this.currentpage * this.pagesize);
    },
  }
}