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();
        }
    }