表头固定 内容滚动 vue

    <div class="yl-table app-container">

                    <!--增加一个表头-->

                    <el-table class="top">

                      <el-table-column prop="userName" label="姓名/IP" align="center" show-overflow-tooltip></el-table-column>

                      <el-table-column prop="eventType" label="风险类型" align="center" :formatter="eventType"></el-table-column>

                      <el-table-column prop="fxLevel" label="风险等级" align="center"

                        :formatter="statuevenType"></el-table-column>

                      <el-table-column prop="fxDesc" label="风险描述" show-overflow-tooltip align="center"></el-table-column>

                      <el-table-column prop="createTime" label="风险时间" show-overflow-tooltip align="center"></el-table-column>

                    </el-table>

                    <!--滚动的列表-->

                    <vue-seamless-scroll v-if="sizeChange" :data="tableList" class="seamless-warp scroll"

                      :class-option="classOption">

                      <el-table :data="tableList" class="bottom" style="width: 100%" hover>

                        <el-table-column prop="userName" label="姓名" show-overflow-tooltip align="center"></el-table-column>

                        <el-table-column prop="eventType" label="风险类型" align="center"

                          :formatter="eventType"></el-table-column>

                        <el-table-column prop="fxLevel" label="风险等级" align="center"

                          :formatter="statuevenType"></el-table-column>

                        <el-table-column prop="fxDesc" label="风险描述" show-overflow-tooltip align="center"></el-table-column>

                        <el-table-column prop="createTime" label="风险时间" show-overflow-tooltip

                          align="center"></el-table-column>

                      </el-table>

                    </vue-seamless-scroll>

                  </div>
                  
                  sizeChange: false,

                  screenWidth: null,
                  
                  mouted（）{
                  this.screenWidth = document.querySelector('.app-container').clientWidth

                      window.onresize = () => {

                        return (() => {

                                  this.screenWidth = document.querySelector('.app-container').clientWidth

                })()

      } }

                窗口size切换 内容展示存在偏差 错位
                watch: {

                    screenWidth: {

                      handler: function (val) {

                        console.log('窗口变化了。。。。。', val)

                        this.screenChange()

                      }

                    },

                  },
                  methods:{
                              screenChange() {

                          this.sizeChange = false;

                          setTimeout(() => {

                            this.sizeChange = true

                          }, 500)

                                },
                  
                  头部内容隐藏 表头保留
                  ::v-deep .top .el-table__body-wrapper {

                      display: none;

                    }

                    ::v-deep .seamless-warp {

                      height: 100%;

                      overflow: hidden;

                    }

                    ::v-deep .bottom .el-table__header-wrapper {

                      display: none;

                      width: 100%;

                    }
                    
                    
                    
                    
                   上面有就是窗口切换的时候会报错vue-seamless-scroll.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'offsetHeight') at eval
                   
                   这个错误可能是由于在`setTimeout`中重新设置`sizeChange`后，`vue-seamless-scroll`组件还没有完全渲染完成，导致获取不到`offsetHeight`属性。你可以尝试使用`this.$nextTick`方法来等待组件渲染完成后再设置`sizeChange`的值，例如：
                     重新写一个方法，这个比较简单
                     
                     
                     mounted() {
                window.addEventListener('resize', this.handleResize)
                },
                methods: {
                handleResize() {

                    this.sizeChange = false;
                    setTimeout(() => {
                    this.$nextTick(() => {
                    this.sizeChange = true;
                    });
                    }, 500)
                    }, 
                    }

是的，这样也可以实现等待组件渲染完成后再设置`sizeChange`的值。首先将`sizeChange`设置为`false`，然后使用`setTimeout`延迟500毫秒，等待一段时间后再使用`this.$nextTick`方法等待组件渲染完成后再设置`sizeChange`的值为`true`。这样就可以避免获取不到`offsetHeight`属性的问题了。

是的，最好在组件销毁时移除resize事件的监听，避免在组件销毁后仍然执行handleResize方法导致报错。你可以在beforeDestroy钩子函数中移除事件监听，例如：

beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
}

这里使用window.removeEventListener方法移除resize事件的监