elementUI的使用-实现分页；弹窗；自动加载；点击表格里的任务名称，弹出详情

<script type="text/template" id="taskquery">
    <div class="company" style="background-color: white;">
        <el-container>
            <el-main v-bind:class="func_main" :style="{height:tableHeight+'px'}">
                <el-table :data="selectData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                          border
                          style="width: 100%"
                          height="90%">
                    <el-table-column prop="taskName"
                                     label="任务名称">
                        <template scope="scope">
                            <div style="color:#409EFF;" @@click="ShowDetail(scope.row)">{{ scope.row.taskName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="taskStatusName"
                                     label="状态">
                    </el-table-column>
                    <el-table-column prop="memo"
                                     label="描述">
                    </el-table-column>
                    <el-table-column prop="beginTime"
                                     label="上次运行开始时间">
                    </el-table-column>
                    <el-table-column prop="beginTime"
                                     label="上次运行结束时间">
                    </el-table-column>
                    <el-table-column prop="runResult"
                                     label="上次运行结果">
                    </el-table-column>
                    <el-table-column prop="isAbnormal"
                                     label="是否异常">
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                <!--分页-->
                <el-pagination @@size-change="handleSizeChange"
                               @@current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[1, 2, 5, 50]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="parseInt(total)">
                </el-pagination>
            </el-footer>
        </el-container>
        @*任务明细*@
       
        @* 弹窗 *@
        <el-dialog style="font-weight: bold;margin-top:-35px !important;" width="35%" title="任务详情" :visible.sync="dialogdetail" v-if="dialogdetail" :close-on-click-modal="false" @@close="dialogClose">
            <el-form :model="tempForm" label-width="150px">
                <el-form-item label="任务名称：">
                    <el-input v-model="tempForm.taskName" readonly="true" style="width:65%"></el-input>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-input v-model="tempForm.taskStatusName" readonly="true" style="width:65%"></el-input>
                </el-form-item>
                <el-form-item label="是否异常：">
                    <el-input v-model="tempForm.isAbnormal" readonly="true" style="width:65%"></el-input>
                </el-form-item>
                <el-form-item label="上次运行开始时间：">
                    <el-input v-model="tempForm.beginTime" readonly="true" style="width:65%"></el-input>
                </el-form-item>
                <el-form-item label="上次运行结束时间：">
                    <el-input v-model="tempForm.endTime" readonly="true" style="width:65%"></el-input>
                </el-form-item>
                <el-form-item label="运行结果：">
                    <el-input v-model="tempForm.runResult" readonly="true" style="width:65%"></el-input>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input v-model="tempForm.memo" readonly="true" style="width:65%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button v-on:click="dialogdetail = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</script>

<script type="text/javascript">
    var taskquery = {
        template: "#taskquery",
        data() {
            return {
                func_name: 'taskquery',
                selectData: [],
                tableHeight: 100,
                dialogdetail: false,//明细比对
                tempForm: {//弹窗值
                },
                currentPage: 1,
                pageSize: 1,
                total: 0
            }
        },
        methods: {
            tab_h() {
                let base_tab_func_main_top = $("." + this.func_main).offset().top;//当前功能，表格屏幕坐标
                this.tableHeight = home.calc_tab_h(base_tab_func_main_top);
            },
            onSelect() {
                this.selectData = [];
                $.ajax({
                    url: '/TaskManagement/TaskQuery/TaskQuery',
                    type: 'POST',
                    success: (data) => {
                        if (data.success) {
                            this.selectData = data.body;
                            this.total = this.selectData.length;
                        }
                    }
                })
            },
            handleSizeChange(newSize) {
                // pagesize改变触发
                this.pageSize = newSize
            },
            handleCurrentChange(newPage) {
                // 页码改变触发
                this.currentPage = newPage
            },
            ShowDetail(row) {
                /*debugger*/
                //每次打开弹窗，初始化表单
                let _this = this;
                _this.tempForm = row;
                _this.dialogdetail = true;
            },
            dialogClose() {

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
       
        computed: {
            // 计算属性的 getter
            func_header: function () {
                return this.func_name + '_func_header';
            },
            func_main: function () {
                return this.func_name + '_func_main';
            },
        },
        mounted: function () {
            this.tab_h();
            this.onSelect();
        }
    };
</script>