表格加载包括分页

guanqb

2023-03-30 2856d3da1b294639fe46150910539087cd3d2f7b

表格加载包括分页

 src/styles/base/index.scss

@@ -263,6 +263,12 @@
                background-color: #409EFF;
            }
        }

        .el-card__body,
        .el-main {
            padding: 0;
            width: 100%;
        }
    }

    .header {
@@ -326,6 +332,11 @@
                font-size: 14px;
            }

            .el-card__body,
            .el-main {
                padding: 0;
                width: 100%;
            }

        }
    }
@@ -356,6 +367,11 @@
            color: #C0C4CC !important;
        }

        .el-card__body,
        .el-main {
            padding: 0;
            width: 100%;
        }

        .header {
            display: flex;

 src/styles/media/index.scss

@@ -2025,8 +2025,9 @@

                        .el-dialog {
                            width: countSizeVw(1000, 1920);
                            height: countSizeVh(700);
                            height: countSizeVh(720);
                        }


                        .el-dialog .el-dialog__header {
                            height: countSizeVh(40);
@@ -2057,7 +2058,7 @@
                    .land-details-box {
                        .el-dialog {
                            width: countSizeVw(1000, 1920);
                            height: countSizeVh(620);
                            height: countSizeVh(640);
                        }

                        .el-dialog__header button {
@@ -2737,7 +2738,7 @@
                .equiment-details-box {
                    .el-dialog {
                        width: countSizeVw(1000, 1920);
                        height: countSizeVh(620);
                        height: countSizeVh(640);
                    }

                    .el-dialog__header button {

 src/views/home/components/leftContainer.vue

@@ -130,7 +130,7 @@
            </svg>
        </div>

        <el-dialog title="学校" :modal="false" :visible.sync="xxPopupShow" :before-lcose="landBeforeClose"
        <el-dialog title="学校" :modal="false" :visible.sync="xxPopupShow" :before-close="landBeforeClose"
            :close-on-click-modal="true" class="land-details-box">
            <el-table :data="xxArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"

 src/views/home/components/schedulingList.vue

@@ -13,12 +13,11 @@
                <el-button type="primary" icon="el-icon-search" @click="searchScheduling">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearSearchScheduling">清空</el-button>
            </div>

            <el-main v-loading="chedulingLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)">
            <el-table :data="schedulingTableData" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                v-loading="chedulingLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)">
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">

                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
@@ -35,9 +34,12 @@
            </el-table>

            <div class="pages all-pagination-sty">
                <el-pagination background layout="prev, pager, next, total" :page-size="page.pageSize" :total="page.total"
                    :current-page="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
                    <el-pagination background layout="prev, pager, next, total" :page-size="page.pageSize"
                        :total="page.total" :current-page="page.currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
            </div>
            </el-main>

        </el-dialog>
    </div>
</template>

 src/views/home/index.vue

@@ -98,18 +98,19 @@
                <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
            </div>

            <el-main v-loading="peopleKeypeopleLoading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(17, 38, 163, 1)">
            <el-table :data="peopleInfoList" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                v-loading="peopleKeypeopleLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)">
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">
                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                        <span>{{ (peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="realName" label="姓名"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="address" label="地址" min-width="240%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="address" label="地址"
                        min-width="240%"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="phone" label="电话"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="areaName" label="所属责任区"></el-table-column>
@@ -120,6 +121,8 @@
                :total="peoplePage.total" :current-page="peoplePage.currentPage"
                @current-change="handlePeopleCurrentChange"></el-pagination>
        </div>
        </el-main>

    </el-dialog>

    <!-- 重点人员 -->
@@ -182,19 +185,19 @@
                <el-button type="primary" icon="el-icon-search" @click="searchEquiment">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearSearchEquiment">清空</el-button>
            </div>

            <el-main v-loading="equimentLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)">
            <el-table :data="equimentTableData" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" :row-class-name="tableRowClassName"
                v-loading="equimentLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)">
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" :row-class-name="tableRowClassName">
                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                        <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>

                <el-table-column :show-overflow-tooltip="true" prop="name" label="设备名称" min-width="320%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="name" label="设备名称"
                        min-width="320%"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="channelId" label="通道编号"
                    min-width="160%"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"
@@ -218,6 +221,8 @@
                    :page-size="pagesize" pager-count="3" :current-page="currentPage"
                    @current-change="handleCurrentChange"></el-pagination>
            </div>
            </el-main>

        </el-dialog>

        <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
@@ -238,12 +243,11 @@
                <el-button type="primary" icon="el-icon-search" @click="searchLandDetail">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearLandDetailSearchValue">清空</el-button>
            </div>

            <el-main v-loading="landLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)">
            <el-table :data="landDetailArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                v-loading="landLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)">
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">
                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                        <span>{{ (landPage.currentPage - 1) * landPage.pageSize + scope.$index + 1 }}</span>
@@ -262,6 +266,8 @@
                    :page-size="landPage.pageSize" :current-page="landPage.currentPage"
                    @current-change="landHandleCurrentChange"></el-pagination>
            </div>
            </el-main>

        </el-dialog>

        <el-dialog title="警情信息" :modal="true" :visible.sync="policeSituationVisible" :modal-append-to-body="false"