vue3中多个表格怎么同时滚动并且固定表头

最新推荐文章于 2024-08-21 14:23:14 发布

原创

最新推荐文章于 2024-08-21 14:23:14 发布 · 1.7k 阅读

标签

#vue.js #javascript #前端

收录于

文章介绍了在Vue应用中，如何处理el-table组件的滚动事件，特别关注了未修改和修改过组件样式两种情况下的不同处理方式，强调了正确选择DOM节点的重要性。

说明：这里需分为两种情况来做。第一种亲情况就是没有修改过el-table这个组件的样式；第二种情况就是修改过el-table组件的样式。第一种较为简单就简单略过，这里主要提及第二种做法。

1.需求效果

2.第一种没有修改过el-table这个组件的样式的做法

（1）直接看大佬vue2的做法

https://blog.csdn.net/z1761419224/article/details/120510842

（2）以下是vue3写法（可以直接使用看看效果，没效果的就看第二种方法）

<template>
  <div>
      <el-table ref="table1" :data="tableData" style="width: 100%; margin-bottom: 20px" height="200px">
          <el-table-column prop="date" label="Date" width="180"></el-table-column>
          <el-table-column prop="name" label="Name" width="180"></el-table-column>
      </el-table>
      <el-table ref="table2" :data="tableData" style="width: 100%" height="200px">
          <el-table-column prop="address" label="Address" width="180"></el-table-column>
          <el-table-column prop="tag" label="Tag" width="180"></el-table-column>
      </el-