实现el-table某一列 在滚动条滑动该列位置时,将其固定在左侧

  1. 首页表格的宽度要大于容器的宽度, 出现滚动条,
  2. 加一个滚动条的事件 @scroll="handleScroll"
  3. 在第3列上加动态的 fixed
<el-table :data="tableData" style="width: 100%" @scroll="handleScroll" ref="achievementsTable>
  <el-table-column prop="date" label="姓名" width="180"></el-table-column>
  <el-table-column prop="date" label="年龄" width="180"></el-table-column>
  <el-table-column prop="date" label="性别" width="180" :fixed="isFixed ? 'left' : false"></el-table-column>
  <el-table-column prop="date" label="身高" width="180"></el-table-column>
  <el-table-column prop="date" label="体重" width="180"></el-table-column>
  <el-table-column prop="date" label="地址" width="180"></el-table-column>
</el-table>
......
data() {
  return {
    isFixed: false
  }
}
  1. 监听handleScroll 事件
 mounted() {
    // 监听 el-table 内部 body-wrapper 的滚动事件
    const bodyWrapper = this.$refs.achievementsTable.$el.querySelector(".el-table__body-wrapper");
    if (bodyWrapper) {
      bodyWrapper.addEventListener("scroll", this.handleScroll);
    }
  },
  beforeDestroy() {
    // 组件销毁时移除事件监听
    const bodyWrapper = this.$refs.achievementsTable.$el.querySelector(".el-table__body-wrapper");
    if (bodyWrapper) {
      bodyWrapper.removeEventListener("scroll", this.handleScroll);
    }
  },
  1. handleScroll事件判断滚动条位置 是否到达第3列,更改isFixed的值
handleScroll(event) {
  const scrollLeft = event.target.scrollLeft ;
  const table = this.$refs.achievementsTable;
  const columns = table.$el.querySelectorAll(".el-table__header th");
  const fourthColumn = columns[2];
  if (fourthColumn) {
    const fourthColumnLeft = fourthColumn.offsetLeft; // 第3列的左侧位置
    // 如果滚动距离超过第4列的位置,则固定
    this.isFixed = scrollLeft > fourthColumnLeft;
    this.$nextTick(() => {
      // 手动调用 doLayout 重新计算布局
      this.$refs.achievementsTable.doLayout();
    });
  }
},
注意:
  1. this.$refs.achievementsTable.doLayout(); 这句代码一定要加, 不然会有闪烁的情况

  2. 如果 在位置方面你感觉有点差异, 比如 还没到位置,就固定了, 或者 超过了位置 才固定,
    可 在 const scrollLeft = event.target.scrollLeft ; 这段代码上进行调整
    如:const scrollLeft = event.target.scrollLeft + 30
    const scrollLeft = event.target.scrollLeft + 124 等

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容