elementUI動態數據表格（帶分頁）

index.vue

<template>
    <div>
        <el-table ref="multipleTable" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="60"></el-table-column>
            <el-table-column prop="eNumber" label="企業編號" width="180" sortable></el-table-column>
            <el-table-column prop="eName" label="企業名稱" show-overflow-tooltip></el-table-column>
            <el-table-column prop="eIndustry" label="所屬行業" width="180"></el-table-column>
            <el-table-column prop="eRange" label="經營范圍" width="180"></el-table-column>
            <el-table-column prop="eModel" label="經營模式" width="180"></el-table-column>
            <el-table-column prop="createTime" label="創建日期" width="180"></el-table-column>
            <el-table-column prop="updateTime" label="更新日期" width="180"></el-table-column>
            <el-table-column prop="recordStatus" label="企業狀態" width="180"></el-table-column>
        </el-table>
        <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                keyword: "集團",
                total: 5,
                currentPage: 1,
　　　　　　　　　 pageSize: 10,
                tableData: [{
                    eNumber: 'A10001',
                    eName: 'YE集團',
                    eIndustry: '金融業',
                    eRange: '商業',
                    eModel: '國有企業',
                    createTime: '2017-03-27',
                    updateTime: '2016-03-27',
                    recordStatus: '1'
                }],
                multipleSelection: []
            }
        },
        created: function(){
            // 組件創建完后獲取數據，
            // 此時 data 已經被 observed 了
            this.fetchData();
        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(function(row)  {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            callbackFunction(result) {
                alert(result + "aaa");
            },
            fetchData(){ //獲取數據
              this.$http.jsonp("http://localhost:8080/wproject/view/enterprise!getListByParam.action",{//跨域請求數據
                params: {
                    keywords:this.keyword//輸入的關鍵詞
                },
                jsonpCallback:'callbackFunction'//這里是callback
              }).then(function(res) {//請求成功回調，請求來的數據賦給searchList數組
                this.total = res.body.count;
                this.currentPage = res.body.curr;
                this.tableData = res.body.data;
                console.info(res);
              },function(res) {//失敗顯示狀態碼
                alert("res.status:"+res.status)
              })
          },

            handleSizeChange(val){

              this.pageSize = val;

              this.currentPage = 1;

              this.fetchData(1, val);

              // console.log(`每頁 ${val} 條`);

            },

            handleCurrentChange(val){

              this.currentPage = val;

              this.fetchData(val, this.pageSize);

              // console.log(`當前頁: ${val}`);

            }

 

    }
}
</script>
<style>
    .el-table th {
        text-align: center;
    }

    .el-table tbody tr td:first-child {
        text-align: center;
    }
</style>

附上Java后台模擬數據接口代碼：

/*jsonp調用接口方法*/
    public void getListByParam() {
        try {
            System.out.println("調用getListByParam方法");
            String callbackFunName = request.getParameter("callback");
            String keywords = request.getParameter("keywords");
            int curPage = Integer.parseInt(request.getParameter("curr"));
            int pageSize = Integer.parseInt(request.getParameter("pageSize"));
            List<Enterprise> enterList = enterpriseService.findAllByParam(keywords, curPage, pageSize);
            SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            //創建JSONObject對象
            JSONObject result = new JSONObject();
            //創建JSONArray實例  
            JSONArray jsonArray = new JSONArray();  
            //for each循環取出每個User對象  
            for(int i=0; i<enterList.size(); i++) {
                Enterprise etpr = enterList.get(i);
                //JSONObject是一個{}包裹起來的一個對象(Object)，  
                //JSONArray則是[]包裹起來的一個數組(Array)  
                //此處為對象，所以用得到JSONObject  
                 JSONObject jo = new JSONObject();
                 jo.put("eId", etpr.geteId());
                 jo.put("eNumber", etpr.getEnterpriseNumber());
                 jo.put("eName", etpr.getEnterpriseName());
                 if(etpr.getEnterpriseIndustry().equals("1")){
                     jo.put("eIndustry", "金融業");
                 } else if(etpr.getEnterpriseIndustry().equals("2")){
                     jo.put("eIndustry", "IT業");
                 } else if(etpr.getEnterpriseIndustry().equals("3")){
                     jo.put("eIndustry", "工業");
                 } else if(etpr.getEnterpriseIndustry().equals("4")){
                     jo.put("eIndustry", "農林牧漁業");
                 } else {
                     jo.put("eIndustry", "");
                 }
                 jo.put("eRange", etpr.getEnterpriseRange());
                 jo.put("eModel", etpr.getEnterpriseModel());
                 jo.put("createTime", formatter.format(etpr.getCreateTime()));
                 jo.put("updateTime", formatter.format(etpr.getUpdateTime()));
                 jo.put("recordStatus", etpr.getRecordStatus());
                 jsonArray.add(jo);
            }
            result.put("code", "0");
            result.put("msg", "");
            result.put("count", enterList.size());
            result.put("curr", curPage);
            result.put("limit", pageSize);
            result.put("data", jsonArray);
            System.out.println("enterList.size(): " + enterList.size());
            System.out.println("curPage: " + curPage);
            System.out.println("pageSize: " + pageSize);
            //設置字符集  
            response.setCharacterEncoding("UTF-8");  
            //頁面輸出  
            PrintWriter out = response.getWriter();
            out.write(callbackFunName + "(" + result.toString() + ")");
            out.flush();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }