element 分页功能和后端数据绑定

    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next"
    :total="total" :current-page="page" :page-size="limit"
    class="paginat" @size-change="handleSizeChange" @current-change="handleCurrentChange">
    </el-pagination>

上边是element官网分页拷贝过来的。

其中total，page，limit需要和vue绑定，notice是我调取后端数据的接口。

监听page不要忘记，不然数据无法分页，监听之后再按当前页数请求一遍接口。

import {notice} from '@/api/mainNotice'
  export default {
    data() {
      return {
        noticeData: [],
        total:0,
        page:1,
        limit:2
      }
    },
    mounted() {
      let paramNotice = {
        page:this.page,
        limit:this.limit,
        categoryName:'通知公告'
      }
      console.log(paramNotice);
      notice(paramNotice).then(res => {
        this.noticeData = res.data
        this.total = res.count;
      });
    },
    methods: {
      indexMethod(index) {
        return index * 2;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val
        console.log(this.page);
      }

    },
    watch:{
      'page' : function(val,oldVal){
        console.log('new: %s, old: %s', val, oldVal)
        notice({
          page:this.page,
          limit:this.limit,
          categoryName:'通知公告'
        }).then(res => {
          this.noticeData = res.data
          this.total = res.count;
        });
      }
    }
  };