vue前端假分页

---

前端假分页是因为有时候后端接口不太方便提供分页功能，而前端需要展示大量数据时，为了提高用户体验，需要将数据分页展示。在这种情况下，前端可以通过自己实现一个假的分页效果来达到分页展示数据的目的。假分页的实现方式是在前端将所有数据加载到页面中，然后通过JavaScript代码实现分页效果，即根据用户的点击或滚动等操作，动态地展示不同页码的数据。这种方式虽然不能真正地减少数据的加载量，但可以提高用户的交互体验，让用户更加方便地查看和操作数据。~~~~
slice（当前页-1）乘当前条数，当前页乘当前条数 原理用slice截取 切换的时候截取对应数据

<el-table
            ref="multipleTable"
            :data="
              DicData.slice(
                (dictCurrentPage - 1) * dictPageSize,
                dictCurrentPage * dictPageSize
              )
            "
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column
              prop="HostName"
              label="主机名"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                <el-link type="primary" @click="detail(scope.row)">
                  {{ scope.row.HostName }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="IpAddress"
              label="IP地址"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="grouping"
              label="分组"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="HostType"
              label="主机类型"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="DataCenter"
              label="数据中心"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="Note"
              label="备注"
              width="120"
              header-align="center"
              align="center"
            />
          </el-table>
        </el-row>
        <el-row :gutter="16" class="mt15">
          <el-col>
            <el-pagination
              :current-page.sync="dictCurrentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="dictPageSize"
              :total="dictTotal"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
            />
          </el-col>
        </el-row>