gold-vue/src/views/z.vue

<script setup>
import { ref, onMounted, reactive, computed, nextTick } from 'vue'

// 变量
const allData = ref([])
const tableData = ref([])
const elTableHeight = ref('')
const theadHeight = ref('')
const contentHeight = ref(0)
const showRowCount = ref(0)
const falseBox = ref(null)
const scollBoxHeight = ref(0)
const scrollTopRowCount = ref(0)

// 方法
onMounted(async function () {
  allData.value = []
  for (let i = 0; i < 10000; i++) {
    allData.value.push({
      name: '张三' + i,
      age: 20 + i,
      address: '北京市海淀区' + i,
      salary: 50000 + i,
      date: '2022-01-01'
    })
  }
  scollBoxHeight.value = 45 * allData.value.length + 45 //多加一行，要不然滚动到底差一行
  nextTick(() => {
    elTableHeight.value = document.querySelector(
      '.table-box .el-table'
    ).offsetHeight
    theadHeight.value = document.querySelector(
      '.table-box .el-table__header-wrapper'
    ).offsetHeight
    console.log('elTableHeight', elTableHeight.value)
    console.log('theadHeight', theadHeight.value)
    contentHeight.value = elTableHeight.value - theadHeight.value
    console.log('contentHeight', contentHeight.value)
    showRowCount.value = Math.floor(contentHeight.value / 45)
    console.log('showRowCount', showRowCount.value)
    // 获取默认显示的前 <showRowCount> 条
    tableData.value = JSON.parse(JSON.stringify(allData.value)).splice(
      0,
      showRowCount.value
    )
  })
  falseBox.value = document.querySelector('.false-box')
  falseBox.value.addEventListener('scroll', function (e) {
    scrollTopRowCount.value = Math.ceil(e.target.scrollTop / 45)
    // 获取从索引<scrollTopRowCount> 开始 <showRowCount> 条
    tableData.value = JSON.parse(JSON.stringify(allData.value)).splice(
      scrollTopRowCount.value,
      showRowCount.value
    )
  })
})
</script>

<template>
  <div
    class="box"
    style="width: 1000px; height: 500px; overflow: hidden; position: relative"
  >
    <!-- false-box这是一个用来显示滚动条的方法 -->
    <div
      class="false-box"
      style="
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0%;
        left: 0%;
        overflow: auto;
      "
    >
      <div class="scroll-box" :style="{ height: scollBoxHeight + 'px' }">
        <!-- scroll-box是用来撑起盒子的方法 -->
      </div>
    </div>
    <div class="table-box">
      <el-table class="el-table" :data="allData" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="salary" label="薪资" width="180">
        </el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
.box {
  width: 1000px;
  height: 500px;
  overflow: hidden;
  position: relative;
}

.false-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  overflow: auto;
}

.scroll-box {
  width: 100%;
  height: 1000px;
  position: absolute;
  top: 0%;
  left: 0%;
}

.table-box {
  width: calc(100% - 20px);
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
}

:deep(.el-table) {
  width: 100%;
  height: 100%;
}

.el-table .el-table__row {
  height: 45px;
}

.el-table .el-table__row td {
  padding: 0px;
}
</style>