Vue2.0+ElementUi封装table组件实现分页功能

用elementUi的table组件和分页组件，封装成可分页的组件table

• html
  <el-dialog v-model="visible" title=你懂得">
<div class="modalbody mylb table-responsive">
<div class="historybtn">
<span v-if="viewUrl">
<el-button size="small" type="info" icon="search" @click="seeQuota">查看</el-button>
</span>
<span v-if="updateUrl">
<el-button size="small" type="info" icon="edit" @click="tableEdit">编辑</el-button>
</span>
<span v-if="removeUrl" >
<el-button size="small" type="info" icon="delete" @click="tableDelete">删除</el-button>
</span>
<span v-if="filterDataUrl">
<el-button size="small" type="info" icon="circle-check" @click="repeatQuota">查找</el-button>
</span>
</div>
<div class="historytab">
<template>
<el-table highlight-current-row border :data="options.tableData" max-height="333" @row-click="rowClick"
:defaultSort="defaultSort" :default-sort="defaultSort" @current-change="handleCurrentChange" style="width: 100%" slot="暂无数据">
<el-table-column type="index" label="序号" width="70"></el-table-column>
<el-table-column
prop="title"
label="标题"
width="180">
<template scope="scope">
<span v-bind:class="scope.row.modelType==2?'font_bold':scope.row.modelType == 3?'font_bold':''">{{scope.row.title}}</span>
</template>
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="180">
<template scope="scope">
<span v-bind:class="
scope.row.status==0?'status_daifenxi':scope.row.status == 1?'status_fenxizhong'
:scope.row.status==2?'status_yifenxi':'status_fenxiyichang'">
{{scope.row.status == 0 ? "未提交分析" : scope.row.status == 1 ? "分析中" : scope.row.status == 2 ? "已分析" : "分析异常"}}
</span>
</template>
</el-table-column>
</el-table>
</template>
</div>
<div class="historypage">
<template v-if="pagination">
<el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="pageOptions.currentPage"
:page-sizes="pageOptions.pageSizes" :page-size="pageOptions.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageOptions.total">
</el-pagination>
</template>
</div>
</div>
<div class="modalfooter"></div>
</el-dialog>
• js

var rmpTable = new Vue({
        el : "#historyQuery",
        data : {
            viewUrl : $.auth.has(window.viewUrl)?true:false,
            saveUrl : $.auth.has(window.saveUrl)?true:false,
            findUrl : $.auth.has(window.findUrl)?true:false,
            removeUrl : $.auth.has(window.removeUrl)?true:false,
            updateUrl : $.auth.has(window.updateUrl)?true:false,
            filterDataUrl : $.auth.has(window.filterDataUrl)?true:false,
            //
            fullscreenLoading : false,
            // 另存为的属性
            saveVisible : false,
            // 查询中途的另存为
            saveAsVisible : false,
            inputValue : "",
            isCheck : false,
            hasPer : hasPer,
            // 历史查询的属性
            tableOrPic : true,
            visible : false,
            options : {},
            defaultSort : {
                prop : 'date',
                order : 'descending'
            },
            currentRow : [],
            pagination : true,
            pageOptions : {
                pageSize : 10,
                currentPage : 1,
                pageSizes : [10, 20, 50, 100],
                total : 0
            }
        },
        methods : {
            // 另存为的方法
            saveSub : function () {
                if (this.inputValue == null || this.inputValue == "") {
                    infoPrompt("名称不能为空");
                    return;
                } else {
                    if (calcStrLen(this.inputValue) > 30) {
                        infoPrompt("标题不能超过30个字符");
                        return;
                    }
                }
                saveAction(this.inputValue,this.isCheck);
            },
            isCheckAction : function(){
                this.isCheck = !this.isCheck;
            },
            cancelSub : function () {
                rmpTable.saveVisible = false;
                rmpTable.inputValue = "";
            },
            // 历史查询的方法
            handleCurrentChange(val) {
                this.currentRow = val;
            },
            pageCurrentChange : function (currentPage) {
                tableId = null;
                this.pageOptions.currentPage = currentPage;
                rmpTable.options.tableData = null;
                this.fetchData();
            },
            pageSizeChange : function (pageSize) {
                tableId = null;
                this.pageOptions.pageSize = pageSize;
                rmpTable.options.tableData = null;
                this.fetchData();
            },
            tableRowClassName(row, index) {
                if (index === 1) {
                    return 'info-row';
                } else if (index === 3) {
                    return 'positive-row';
                }
                return '';
            },
            tableEdit : function (idx) {
                if (tableId == null) {
                    infoPrompt("至少勾选一条");
                    return;
                }
                this.$prompt('标题', '自定义模板', {
                    confirmButtonText : '确定',
                    cancelButtonText : '取消',
                    inputPattern : /\w*/,
                    inputValue : tableTitle,
                    inputErrorMessage : '邮箱格式不正确'
                }).then(({
                        value
                    }) => {
                    $.ajax({
                        url : contextPath + updateUrl,
                        data : {
                            id : tableId,
                            title : value
                        },
                        type : "post",
                        success : function (resp) {
                            if (!resp.success) {
                                infoPrompt("名称不能重复");
                                return;
                            }
                            rmpTable.$message({
                                type : 'success',
                                message : '修改成功'
                            });
                            rmpTable.visible = false;
                            rmpTable.visible = true;
                            rmpTable.options.tableData = null;
                            rmpTable.fetchData();
                        }
                    });
                });
            },
            repeatQuota : function () {
                if (tableId == null) {
                    infoPrompt("至少勾选一条");
                    return;
                }
                indicatorObj.indicatorData = findIndicators(1, tableId);
                rmpTable.visible = false;
            },
            seeQuota : function () {
                if (tableId == null) {
                    infoPrompt("至少勾选一条");
                    return;
                }
                var obj = {
                    taskId : tableId,
                };
                findFilterData(obj);
                rmpTable.visible = false;
                $('.resultDiv').empty();
                if (searchStatus == 2) {
                    searchAction();
                }
            },
            rowClick : function (row) {
                tableId = row.id;
                searchStatus = row.status;
                tableTitle = row.title;
            },
            handleSelectionChange : function () {},
            tableDelete : function () {
                if (tableId == null) {
                    infoPrompt("至少勾选一条");
                    return;
                }
                var ids = tableId;
                this.$confirm('是否删除查询?', '提示', {
                    confirmButtonText : '确定',
                    cancelButtonText : '取消',
                    type : 'warning'
                }).then(() => {
                    $.ajax({
                        url : contextPath + removeUrl,
                        data : {
                            idsStr : ids
                        },
                        async : false,
                        type : "post",
                        success : function (resp) {
                            rmpTable.visible = false;
                            rmpTable.visible = true;
                            rmpTable.options.tableData = null;
                            rmpTable.fetchData();
                            rmpTable.$message({
                                type : 'success',
                                message : '删除成功'
                            });
                        }
                    });
                });

            },
            fetchData : function () {
                this.options.tableData = null;
                tableId = null;
                var url = this.options.url;
                var data,
                page,
                start,
                limit;
                if (this.pagination) {
                    page = this.pageOptions.currentPage;
                    start = eval((this.pageOptions.currentPage - 1) * (this.pageOptions.pageSize));
                    limit = this.pageOptions.pageSize;
                    data = {
                        page : page,
                        start : start,
                        limit : limit
                    };
                } else {
                    data = "";
                }
                var result = $.ajax({
                        url : url,
                        contentType : 'application/x-www-form-urlencoded',
                        data : data,
                        type : 'post',
                        async : false
                    }).responseText;
                var resultJson = jQuery.parseJSON(result);
                if (this.pagination) {
                    this.pageOptions.total = resultJson.total;
                }
                $(resultJson.rows).each(function (idx, item) {
                    this['isEdit'] = false;
                });

                if (this.options.tableData == null) {
                    this.options.tableData = resultJson.rows;
                }
            }
        },
        watch : {
            options : function (newValue, oldValue) {
                this.fetchData();
            },
            visible : function (newValue, oldValue) {
                if (newValue) {
                    this.fetchData();
                }
            }
        }
    });
var options2 = {
    columns : [{
            prop : "title",
            label : "标题"
        }, {
            prop : "status",
            label : "状态"
        }
    ],
    multipleSlt : false,
    url : contextPath + findUrl
};
Vue.set(rmpTable, 'options', $.extend({}, rmpTable.options, options2));