实现表格吸顶功能

表格吸顶： 当页面滑动到一定位置时能够让列名吸顶固定，保证无论怎么滑动都能看见列名； 或者给el-table加一个最大高度：max-height="calc(100vh - 360px)"

<script lang="ts" setup>
import {reactive, ref, onMounted, onUnmounted} from 'vue'
const tableData = reactive([])
for (let i = 0; i < 100; i++) {
  tableData.push({
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  })
}

const tableRef = ref(null)
const handleScroll = (e) => {
  // const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const top = tableRef.value.getBoundingClientRect().top
  if (top <= 0) {
    document.querySelector('.el-table__header').style.position = 'fixed'
    // 到顶
  } else {
    document.querySelector('.el-table__header').style.position = 'static'
  }
}
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

</script>

<template>
  <h2 class="h2">顶部</h2>
  <div ref="tableRef">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="date" label="Date" width="150" />
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column prop="state" label="State" width="120" />
      <el-table-column prop="city" label="City" width="320" />
      <el-table-column prop="address" label="Address" width="600" />
      <el-table-column prop="zip" label="Zip" />
    </el-table>
  </div>
</template>

<style scoped lang="less">
.h2 {
  height: 200px;
}
/deep/ .el-table__inner-wrapper {
  .el-table__header {
    position: static;
    top: 0px;
    left: 0;
    z-index: 1000;
  }
}
</style>