技術標籤：vue.jsjavascript

    <!-- 分頁 -->
    <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;
        });
      }
    }
  };