el-table横向滚动时表头与表体的内容速度不一致（错位）

最新推荐文章于 2025-04-22 18:44:49 发布

木木芳草

最新推荐文章于 2025-04-22 18:44:49 发布

阅读量2.4k

点赞数 1

分类专栏： element element -table 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44817180/article/details/106047903

版权

在Vue项目中使用el-table组件实现表格横向滚动时，发现表头与表体滚动不同步，导致内容错位。经过分析，问题出在滚动事件处理上。通过调整CSS样式和监听滚动事件，实现了表头与表体的滚动同步，解决了错位问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   <div class="table-overflow-x">
            <el-table  v-if="ifCollectionAccountSelect != '1'" :data="tableData" ref="dataTable" id="dataTable" style="width: 100%" :height="dataTableHeight" :span-method="arraySpanMethod" empty-text="暂无数据">
                <el-table-column prop="motionNo" label="编号" width="80px">
                </el-table-column>
            </el-table>
            </div>
               <div class="table-overflow-x table-overflow-x-fixed">
            <el-table  v-if="ifCollectionAccountSelect == '1'" :data="tableData" id="accountSelectTable" ref="dataTable" style="width: 100%" :height="dataTableHeight" :span-method="arraySpanMethod">