traffic-audit-web/src/views/DataView.vue
@@ -3,7 +3,7 @@
    <app-header title="交通统计报表审核系统 - 数据查看"></app-header>
    <el-container>
      <el-aside width="200px">
        <el-menu router default-active="/data">
        <el-menu ref="sideMenu" router :default-active="$route.path" @select="onMenuSelect">
          <el-menu-item index="/dashboard">工作台</el-menu-item>
          <el-menu-item index="/import">数据导入</el-menu-item>
          <el-menu-item index="/data">数据查看</el-menu-item>
@@ -45,20 +45,22 @@
        <div style="color:#909399;font-size:12px;margin-bottom:6px">
          共 {{ total }} 条记录,当前第 {{ page }} 页
        </div>
        <div class="table-area" ref="tableArea">
        <el-table :data="records" border v-loading="loading" size="small" style="width:100%" height="100%">
          <el-table-column v-for="c in columns" :key="c.prop" :prop="c.prop" :label="c.label" :min-width="c.width" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ formatCell(scope.row[c.prop]) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-wrap" ref="tableWrap">
          <div class="table-area">
            <el-table :data="records" border v-loading="loading" size="small" style="width:100%" height="100%">
              <el-table-column v-for="c in columns" :key="c.prop" :prop="c.prop" :label="c.label" :min-width="c.width" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ formatCell(scope.row[c.prop]) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination style="margin-top:15px;text-align:right"
            background layout="total, prev, pager, next, sizes"
            :total="total" :current-page.sync="page" :page-size.sync="size"
            :page-sizes="[20, 50, 100]" @current-change="loadData" @size-change="loadData">
          </el-pagination>
        </div>
        <el-pagination style="margin-top:15px;text-align:right"
          background layout="total, prev, pager, next, sizes"
          :total="total" :current-page.sync="page" :page-size.sync="size"
          :page-sizes="[20, 50, 100]" @current-change="loadData" @size-change="loadData">
        </el-pagination>
      </el-main>
    </el-container>
  </el-container>
@@ -102,14 +104,15 @@
          this.page = 1
          this.loadData()
        }
      }).catch(() => {
      }).catch(e => {
        if (e && e._toast) return
        this.$message.error('数据查询失败')
      }).finally(() => {
        this.loading = false
      })
    },
    toggleFullscreen() {
      const el = this.$refs.tableArea
      const el = this.$refs.tableWrap
      if (!document.fullscreenElement) {
        if (el && el.requestFullscreen) el.requestFullscreen()
        else this.$message.warning("浏览器不支持全屏")
@@ -138,4 +141,18 @@
  background: #fff;
  overflow: auto;
}
#app .table-wrap:fullscreen {
  padding: 20px;
  background: #fff;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
#app .table-wrap:fullscreen .table-area {
  flex: 1 1 auto;
  min-height: 0;
}
#app .table-wrap:fullscreen .el-pagination {
  flex: none;
}
</style>