Vue2.0+ElementUI+PageHelper實(shí)現(xiàn)的表格分頁(yè)功能

更新時(shí)間：2021年10月12日 10:20:52 作者：lzrit

ElementUI也是一套很不錯(cuò)的組件庫(kù)，對(duì)于我們經(jīng)常用到的表格、表單、時(shí)間日期選擇器等常用組件都有著很好的封裝和接口。這篇文章主要介紹了Vue2.0+ElementUI+PageHelper實(shí)現(xiàn)的表格分頁(yè),需要的朋友可以參考下

前言

最近做了一些前端的項(xiàng)目，要對(duì)表格進(jìn)行一些分頁(yè)顯示。表格分頁(yè)的方法有很多，從宏觀上來(lái)說(shuō)分為物理分頁(yè)和邏輯分頁(yè)，由于邏輯分頁(yè)（即前端分頁(yè)）的做法是將數(shù)據(jù)全部緩存，然后分頁(yè)顯示，這樣在數(shù)據(jù)量較大的時(shí)候會(huì)對(duì)瀏覽器的速度產(chǎn)生影響，所以考慮之后我使用了后端分頁(yè)，后端分頁(yè)的特點(diǎn)是對(duì)當(dāng)前頁(yè)的數(shù)據(jù)進(jìn)行請(qǐng)求，每次當(dāng)頁(yè)碼變化或者每頁(yè)數(shù)據(jù)量變化的時(shí)候，就重新發(fā)一次請(qǐng)求。這里所用到的技術(shù)主要有以下幾種：

Spring
SpringMVC
Mybatis
VueJS 2.0
ElementUI

后端數(shù)據(jù)庫(kù)用的是Mysql，其實(shí)使用其他的數(shù)據(jù)庫(kù)也可以，因?yàn)镻ageHelper插件里有對(duì)于各個(gè)數(shù)據(jù)庫(kù)的兼容。PageHelper的本質(zhì)是插入一個(gè)Interceptor，在mybatis的sql語(yǔ)句執(zhí)行之前進(jìn)行分頁(yè)處理，本質(zhì)上是加了兩個(gè)limit的參數(shù)。對(duì)于PageHelper的配置和用法，請(qǐng)參考Spring + Mybatis 使用 PageHelper 插件分頁(yè)這篇文章，這里不再贅述。

前端所使用的是最近很火的vuejs框架2.0，這是一個(gè)mvvm架構(gòu)的框架，類似于AngularJS，但是更加輕量。UI框架使用的是由餓了么團(tuán)隊(duì)推出的elementUI框架，這是一款基于vuejs的框架，正好和我們的前端框架完美結(jié)合，并且封裝了很多組件，開(kāi)發(fā)起來(lái)很方便。
下面就是這個(gè)Demo的截圖，實(shí)現(xiàn)了基本的增刪改查功能，表格排序是elementUI的表格控件里自帶的一個(gè)屬性，可以很方便的設(shè)置。

正文

下面是程序的截圖，右鍵在新標(biāo)簽頁(yè)中打開(kāi)圖片可以看得清楚些。

下面來(lái)看一下前端的代碼，首先是引入的文件：

    <link rel="stylesheet" href="/core/element-ui/lib/theme-default/index.css" rel="external nofollow" >
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/json2.js"></script>
    <script src="./js/vue.min.js"></script>  
    <script src="./js/vue-resource.js"></script>
    <script src="./element-ui/lib/index.js"></script>

其中第一行和最后一行是ElementUI的導(dǎo)入包，可以從ElementUI官網(wǎng)下載到源文件引入，也可以直接使用CDN的方式來(lái)引入：

<!-- 引入樣式 -->
<link rel="stylesheet"  rel="external nofollow" >
<!-- 引入組件庫(kù) -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

倒數(shù)第二行vue-resource是vuejs的一個(gè)ajax插件，可以通過(guò)XMLHttpRequest或JSONP發(fā)起請(qǐng)求并處理響應(yīng)。簡(jiǎn)單的說(shuō)，就是可以用來(lái)發(fā)送ajax請(qǐng)求。

接下來(lái)是style樣式

    <style>
      .el-select .el-input {
        width: 110px;
      }
 
      .el-table .info-row {
            background: #c9e5f5;
      }   
 
      #top {
          background:#20A0FF;
          padding:5px;
          overflow:hidden
      }
    </style>

HTML body

    <div id="test">             
 
        <div id="top">          
            <span style="float:right;"> 
                <el-button type="text" @click="add" style="color:white">添加</el-button>  
                <el-button type="text" @click="deletenames" style="color:white">批量刪除</el-button>        
            </span>                     
        </div>  
 
 
        <br/>
 
        <div style="margin-top:15px">
           <el-input placeholder="請(qǐng)輸入內(nèi)容" v-model="criteria" style="padding-bottom:10px;">
              <el-select v-model="select" slot="prepend" placeholder="請(qǐng)選擇">
                 <el-option label="id" value="1"></el-option>
                 <el-option label="name" value="2"></el-option>
              </el-select>
              <el-button slot="append" icon="search" v-on:click="search"></el-button>
          </el-input>       
 
          <el-table
            ref="testTable"       
            :data="tableData"
            style="width:100%"
            border
            :default-sort = "{prop: 'id', order: 'ascending'}"
            @selection-change="handleSelectionChange"   
            @row-click="handleclick"
            :row-class-name = "tableRowClassName"
            >
            <el-table-column
              type="selection"
              >
            </el-table-column>
            <el-table-column
              prop="id"
              label="Id"
              sortable
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              sortable>
            </el-table-column>
            <el-table-column label="操作">
              <template scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
              </template>
            </el-table-column>
          </el-table>
 
          <div align="center">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount">
              </el-pagination>
          </div>
        </div> 
    </div>
 
    <footer align="center">
        <p>&copy; Vue.js 2.0 + ElementUI分頁(yè)Demo</p>
    </footer>

接下來(lái)是比較重要的創(chuàng)建vue實(shí)例。這里使用ES5的寫(xiě)法。

    <script>
    var vue = new Vue({         
            el:"#test",
            data: {       
                //表格當(dāng)前頁(yè)數(shù)據(jù)
                tableData: [],
 
                //多選數(shù)組
                multipleSelection: [],
 
                //請(qǐng)求的URL
                url:'newstu/querystudentbypage',
 
                //搜索條件
                criteria: '',
 
                //下拉菜單選項(xiàng)
                select: '',
 
                //默認(rèn)每頁(yè)數(shù)據(jù)量
                pagesize: 10,
 
                //默認(rèn)高亮行數(shù)據(jù)id
                highlightId: -1,
 
                //當(dāng)前頁(yè)碼
                currentPage: 1,
 
                //查詢的頁(yè)碼
                start: 1,
 
                //默認(rèn)數(shù)據(jù)總數(shù)
                totalCount: 1000,
            },
 
            methods: {
 
                //從服務(wù)器讀取數(shù)據(jù)
                loadData: function(criteria, pageNum, pageSize){                    
                    this.$http.get(this.url,{parameter:criteria, pageNum:pageNum, pageSize:pageSize}).then(function(res){
                        this.tableData = res.data.pagestudentdata;
                        this.totalCount = res.data.number;
                    },function(){
                        console.log('failed');
                    });                 
                },
 
                //多選響應(yīng)
                handleSelectionChange: function(val) {
                    this.multipleSelection = val;
                },
 
                //點(diǎn)擊行響應(yīng)
                handleclick: function(row, event, column){
                    this.highlightId = row.id;
                },
 
                //編輯
                handleEdit: function(index, row) {
                    this.$prompt('請(qǐng)輸入新名稱', '提示', {
                          confirmButtonText: '確定',
                          cancelButtonText: '取消',
                        }).then(({ value }) => {
                            if(value==''||value==null)
                                return;
                            this.$http.post('newstu/update',{"id":row.id,"name":value},{emulateJSON: true}).then(function(res){
                                this.loadData(this.criteria, this.currentPage, this.pagesize);                              
                            },function(){
                                console.log('failed');
                            });
                        }).catch(() => {
 
                    });
                },
 
 
                //單行刪除
                handleDelete: function(index, row) {
                    var array = [];
                    array.push(row.id);
                    this.$http.post('newstu/delete',{"array":array},{emulateJSON: true}).then(function(res){
                        this.loadData(this.criteria, this.currentPage, this.pagesize);
                    },function(){
                        console.log('failed');
                    });
                },
 
                //搜索
                search: function(){
                    this.loadData(this.criteria, this.currentPage, this.pagesize);
                },
 
                //添加
                add: function(){
                        this.$prompt('請(qǐng)輸入名稱', '提示', {
                          confirmButtonText: '確定',
                          cancelButtonText: '取消',
                        }).then(({ value }) => {
                            if(value==''||value==null)
                                return;
                            this.$http.post('newstu/add',{"name":value},{emulateJSON: true}).then(function(res){
                                this.loadData(this.criteria, this.currentPage, this.pagesize);
                            },function(){
                                console.log('failed');
                            });
                        }).catch(() => {
 
                    });
 
                },
 
                //多項(xiàng)刪除
                deletenames: function(){
                    if(this.multipleSelection.length==0)
                        return;
                    var array = [];
                    this.multipleSelection.forEach((item) => {
                        array.push(item.id);
                    })
                    this.$http.post('newstu/delete',{"array":array},{emulateJSON: true}).then(function(res){
                        this.loadData(this.criteria, this.currentPage, this.pagesize);
                    },function(){
                        console.log('failed');
                    });
                },
 
                //改變當(dāng)前點(diǎn)擊的行的class，高亮當(dāng)前行
                tableRowClassName: function(row, index){
                   if(row.id == this.highlightId)
                   {
                      return 'info-row';
                   }
                },
 
                //每頁(yè)顯示數(shù)據(jù)量變更
                handleSizeChange: function(val) {
                    this.pagesize = val;
                    this.loadData(this.criteria, this.currentPage, this.pagesize);
                },
 
                //頁(yè)碼變更
                handleCurrentChange: function(val) {
                    this.currentPage = val;
                    this.loadData(this.criteria, this.currentPage, this.pagesize);
                },        
 
            },      
 
 
          });
 
          //載入數(shù)據(jù)
          vue.loadData(vue.criteria, vue.currentPage, vue.pagesize);
    </script>

現(xiàn)在對(duì)上述代碼進(jìn)行一個(gè)簡(jiǎn)單的解釋，tableData是表格當(dāng)前頁(yè)所顯示的數(shù)據(jù)的數(shù)組，當(dāng)網(wǎng)頁(yè)加載出來(lái)后，首先執(zhí)行l(wèi)oadData方法，criteria是當(dāng)前的搜索條件，默認(rèn)為空，第二個(gè)參數(shù)是當(dāng)前頁(yè)碼，默認(rèn)為第一頁(yè)，第三個(gè)參數(shù)為偏移量，即想查詢的數(shù)量，也就是當(dāng)前每頁(yè)所含有的數(shù)據(jù)量。當(dāng)頁(yè)碼或每頁(yè)數(shù)據(jù)量改變時(shí)都會(huì)以這些參數(shù)的新值作為參數(shù)重新調(diào)用這個(gè)方法。我們可以看一下Controller的代碼：

    @ResponseBody
    @RequestMapping(value = "/querystudentbypage", method = RequestMethod.GET)  
    public Map<String, Object> querystudentbypage(@RequestParam(value="parameter")String parameter, 
            @RequestParam(value="pageNum")int pageNum, @RequestParam(value="pageSize")int pageSize) 
    {  
        Page<Student> page = iNewStudentService.selectStudents(parameter, pageNum, pageSize);
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("pagestudentdata", page);
        map.put("number", page.getTotal());
        return map;
    }

ce的實(shí)現(xiàn)代碼：

    public Page<Student> selectStudents(String parameter, int pageNum, int pageSize)
    {
        Page<Student> page = PageHelper.startPage(pageNum, pageSize);
        newstudentMapper.selectStudents(parameter);
        return page;
    }

mybatis的代碼

    <select id="selectStudents" resultMap="NewStudentResultMap">
        select id,name from student where id=#{parameter} or name like CONCAT('%',#{parameter},'%')  
    </select>

注：為了代碼的簡(jiǎn)便，這里對(duì)用戶的輸入進(jìn)行了模糊處理，數(shù)據(jù)表中的id字段等于用戶的輸入或name字段包含了用戶的輸入都可以被查詢出來(lái)。

從上面的service實(shí)現(xiàn)類和mabatis的代碼中可以看出，我們并沒(méi)有手動(dòng)去給sql語(yǔ)句加limit，而是在newstudentMapper.selectStudents(parameter);這句代碼之前加入了Page page = PageHelper.startPage(pageNum, pageSize);這句代碼就是對(duì)PageHelper的調(diào)用，不需要去管PageHelper如何去實(shí)現(xiàn)（實(shí)際是通過(guò)Interceptor），只需要這一句代碼就可以做出物理分頁(yè)。它會(huì)對(duì)緊跟在它后面的一個(gè)sql查詢起作用，并且返回分頁(yè)后的當(dāng)頁(yè)代碼。
Controller中的map我們可以看到put了兩個(gè)值，一個(gè)是返回的List，另一個(gè)是數(shù)據(jù)總量。前端的表格控件會(huì)用到這個(gè)LIst，而分頁(yè)控件會(huì)用到這個(gè)數(shù)據(jù)總量。注意startPage的參數(shù)，第一個(gè)是想要請(qǐng)求的頁(yè)碼，第二個(gè)是請(qǐng)求頁(yè)的數(shù)據(jù)量。這兩個(gè)要與前端請(qǐng)求時(shí)發(fā)送的參數(shù)相對(duì)應(yīng)。

程序的其他基本功能包括添加、修改、刪除、批量刪除等，前端的代碼都做了解釋，后端也只是單純的調(diào)數(shù)據(jù)庫(kù)而已，這里就不再貼上后端的代碼。

注：
表格行點(diǎn)擊高亮功能在ElementUI的表格控件中通過(guò)添加highlight-current-row屬性可以設(shè)置，不過(guò)高亮的顏色被封裝到了css文件里。我這里沒(méi)有用到這個(gè)屬性，而是自定義了一個(gè)class的style，當(dāng)點(diǎn)擊某行時(shí)把自定義的style賦給當(dāng)前行。如果對(duì)ElementUI本身的高亮顏色不滿意又不想去改css文件的話，可以像文中這種方式自定義一個(gè)行點(diǎn)擊響應(yīng)。

寫(xiě)在最后的話

vuejs作為一個(gè)前端控件，在最近幾年越來(lái)越受歡迎，它的社區(qū)很活躍，同時(shí)又有大量的開(kāi)源項(xiàng)目庫(kù)與之配套，詳細(xì)列表請(qǐng)參考Vue 開(kāi)源項(xiàng)目庫(kù)匯總。如果將vuejs與開(kāi)源庫(kù)整合使用，將大大提升前端開(kāi)發(fā)效率，尤其是對(duì)于像我這樣對(duì)前端并不是很熟悉的后端工程師，也是可以對(duì)照著官網(wǎng)上面的教程和例子進(jìn)行前端開(kāi)發(fā)。如果使用ES6的寫(xiě)法，那么模塊化會(huì)更加輕松。

ElementUI也是一套很不錯(cuò)的組件庫(kù)，對(duì)于我們經(jīng)常用到的表格、表單、時(shí)間日期選擇器等常用組件都有著很好的封裝和接口。

PageHelper作為一個(gè)國(guó)人寫(xiě)的mybatis分頁(yè)插件，有著相當(dāng)不錯(cuò)的表現(xiàn)，并且支持當(dāng)前所有的主流數(shù)據(jù)庫(kù)，使用起來(lái)也很方便。

前端開(kāi)發(fā)所需要學(xué)習(xí)的東西并不比后端開(kāi)發(fā)少多少，而且更需要一個(gè)經(jīng)驗(yàn)的積累，在此記錄一下學(xué)習(xí)前端開(kāi)發(fā)的歷程。

到此這篇關(guān)于Vue2.0+ElementUI+PageHelper實(shí)現(xiàn)的表格分頁(yè)功能的文章就介紹到這了,更多相關(guān)Vue2.0 ElementUI PageHelper表格分頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: