fix: 8条整改落地——数据查看滚动加载/规则阈值联动通用化/旅客运政导入兼容.xls/审核月报弹窗删企业解释列/汇总大表导出无筛选自适应/报表Ta...

zhizhijie

2026-09-08 0548cc15e54656285baf36b3494f9456b16f975f

 traffic-audit-web/src/views/DataView.vue

@@ -111,7 +111,19 @@
        this.$message.error('数据查询失败')
      }).finally(() => {
        this.loading = false
        this.$nextTick(() => this.attachBodyScroll())
      })
    },
    // el-table 固定高度后，真正的竖向滚动容器是内部的 body-wrapper（页面本身不滚动）
    attachBodyScroll() {
      const wrap = this.$refs.tableWrap
      if (!wrap) return
      const bw = wrap.querySelector('.el-table__body-wrapper')
      if (bw && bw._vwScrollHandler !== this.onScroll) {
        if (bw._vwScrollHandler) bw.removeEventListener('scroll', bw._vwScrollHandler)
        bw.addEventListener('scroll', this.onScroll, { passive: true })
        bw._vwScrollHandler = this.onScroll
      }
    },
    // 滚动到底部自动追加下一页（保留手动分页跳页能力）
    loadMore() {
@@ -143,6 +155,7 @@
        this.$message.error('加载更多失败')
      }).finally(() => {
        this.loadingMore = false
        this.$nextTick(() => this.attachBodyScroll())
      })
    },
    onScroll(e) {
@@ -189,17 +202,39 @@
      // capture=true：el-table 内部 body-wrapper 的滚动在捕获阶段也能收到
      this.$refs.tableWrap.addEventListener('scroll', this.onScroll, { passive: true, capture: true })
    }
    this.$nextTick(() => this.attachBodyScroll())
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.onScroll)
    if (this.$refs.tableWrap) {
      this.$refs.tableWrap.removeEventListener('scroll', this.onScroll, { capture: true })
      const bw = this.$refs.tableWrap.querySelector('.el-table__body-wrapper')
      if (bw && bw._vwScrollHandler) bw.removeEventListener('scroll', bw._vwScrollHandler)
    }
  }
}
</script>
<style scoped>
.el-header { background: #409EFF; color: white; line-height: 60px; font-size: 18px; }
#app .table-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 330px);
  min-height: 300px;
}
#app .table-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#app .table-area .el-table {
  width: 100%;
  height: 100%;
}
#app .table-wrap .el-pagination {
  flex: none;
  margin-top: 8px;
}
#app .table-area:fullscreen {
  padding: 20px;
  background: #fff;
@@ -211,6 +246,7 @@
  overflow: auto;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#app .table-wrap:fullscreen .table-area {
  flex: 1 1 auto;