之前一直用的是jquery的datatable實現分頁效果，第一次使用vue下的element-ui，此篇部落格記錄一下踩坑後的實現。

首先，html頁面 這邊就不贅述，可去官網看文件

<div id="tabs">
<el-row>
    <el-table ref="table"
     :data="tableData"
      border tooltip-effect="dark"
     style="width:100%"
     @selection-change="handleSelectionChange">
   <el-table-column
 
 prop="id" label="ID" show-overflow-tooltip></el-table-column>
   <el-table-column prop="jsdw" label="接收單位名稱" show-overflow-tooltip></el-table-column>
   <el-table-column prop="xxnr" label="內容" show-overflow-tooltip></el-table-column>                   <el-table-column
 
 prop="cjsj" label="釋出時間" show-overflow-tooltip></el-table-column>
   <el-table-column prop="ckzt" label="檢視狀態" :formatter="status" show-overflow-tooltip></el-table-column>
   </el-table>
</el-row>
<!--列表底部工具條和分頁符-->
   <el-row>
    <div class="selectPages"
 
>
     <el-pagination
     background
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page.sync="currentPage"
     :page-sizes="[10, 20, 30, 40]"
     :page-size="pagesize"
     layout="total, prev, pager, next, jumper"
     :total="totalCount">
 </el-pagination>
   </div>
  </el-row>
<div>

然後是js

var Main = new Vue({
    el: '#tabs',
    data:{
            //預設每頁資料量
            pagesize: 10,
            //預設當前頁碼
            currentPage: 1,
            //查詢的頁碼
            start: 1,
            //預設資料總數
            totalCount: 1000,
            tableData: [],
            multipleSelection: [],
            url:'/industry/messages'
    },
    methods: {
        //從伺服器讀取資料
        loadData: function(criteria, pageNum, pageSize){
            this.$http.get(this.url,
                {params: {parameter:criteria,//查詢值，可不加
                    pageNum:pageNum,//當前頁碼
                    pageSize:pageSize//每頁數量
                    }},
                ).then(function(res){
                this.tableData = res.data.content;
                this.totalCount = res.data.totalElements;
            },function(){
                console.log('failed');
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //每條頁數修改會觸發
        handleSizeChange(val) {
            this.pagesize = val;
            this.loadData(this.criteria, this.currentPage, this.pagesize);
        },
        //當前頁面修改會觸發
        handleCurrentChange(val) {
            this.currentPage = val;
            this.loadData(this.criteria, this.currentPage, this.pagesize);
        },
        
        //檢視狀態
        status: function(row, column){
            if(row.ckzt === 0){
                return "未檢視";
            }else if(row.ckzt === 1){
                return "已檢視";
            }
        },
    }
});

Main.loadData(Main.criteria, Main.currentPage, Main.pagesize);

要注意的幾個點

• this.$http.get()使用要匯入包

• get傳參要用 params: {} （這裡害我浪費了好多時間）

接著就是後端了，先是controller

   /**
     * table
     *
     * @param search
     * @return
     */
    @GetMapping("/messages")
    @ResponseBody
    public String queryPeccancy(@ModelAttribute MessageForm.Search search) {
        //搜尋
        Page<Fsxx> pageResult = industryService.queryFsxxs(search);
        //通過Json字串返回前端
        return JSON.toJSONString(pageResult);
    }

這裡沒什麼，接著是service和dao層，就放一起了

public Page<Fsxx> queryFsxxs(MessageForm.Search search) {
        //分頁資料處理
        Pageable pageable = new PageRequest(search.getPageNum() - 1, search.getPageSize(), new Sort("id"));
        Page<Fsxx> result = fsxxDao.findMessages(pageable);
        return result;
    }
    
   //dao層：
    @Query("select f from Fsxx f where f.sc =0")
    Page<Fsxx> findMessages2(Pageable pageable);

注意的幾個點

• 用@ModelAttribute獲取裡面引數要有pageNum，pageSize，還有自己要加的查詢值
• 分頁資料 search.getPageNum() - 1, search.getPageSize() 做分頁查詢

經過一天鑽研把沒接觸過的東西實現，還是有些小成就感，總的來說也不難，主要是碰到小錯誤要耐心尋找，善於使用除錯。