vue3+element-plus实现两个表格的滚动条同步滚动

最新推荐文章于 2024-09-30 14:28:41 发布

我与影子的故事

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量254

点赞数 3

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_30445005/article/details/141965073

版权

第一个表格

			<el-table
            ref="firstTable"
            :show-header="false"
            :data="summaryData"
            style="width: 100%;"
            min-height="250px"
          >
            
            <el-table-column fixed="left" label="序号" width="50" />

            
            <el-table-column fixed="left" prop="status" label="合计类型" width="150" />
            
          	</el-table>

第二个表格

			<el-table
            ref="secondTable"
            :show-header="false"
            :data="summaryData"
            style="width: 100%;"
            min-height="250px"
          >
            
            <el-table-column fixed="left" label="序号" width="50" />

            
            <el-table-column fixed="left" prop="status" label="合计类型" width="150" />
            
          	</el-table>

data() {
    return {
      summaryData:[],
      filters: {
        fundName: '',
        summaryData: [], // 存储合计数据
        fourLeadIndustry: '',
        sixAddNIndustry: '',
        icRegisterDateRange: []
      },
      tableData: [],
      queryParams: {
        pageNo: 1,     // 当前页码
        pageSize: 10,  // 每页显示的条目数
      },
      total: 0,        // 数据总数
      loading: false,  // 加载状态
      isSearchBarVisible: ['1'], // 控制搜索框的显示/隐藏，默认展开
      isSyncing: false,  // 防止滚动事件互相触发
    };
  },
methods: {
    syncScroll() {
      // 获取第一个表格的滚动容器，'.el-scrollbar__wrap' 是表格的横向滚动区域
      const firstTableWrapper = this.$refs.firstTable?.$el.querySelector('.el-scrollbar__wrap');

      // 获取第二个表格的滚动容器，'.el-scrollbar__wrap' 是表格的横向滚动区域
      const secondTableWrapper = this.$refs.secondTable?.$el.querySelector('.el-scrollbar__wrap');

      // 检查两个表格的滚动容器是否都成功获取到
      if (firstTableWrapper && secondTableWrapper) {

        // 添加第一个表格的滚动事件监听器，当用户在第一个表格上滚动时触发
        firstTableWrapper.addEventListener('scroll', () => {
          // 检查是否处于同步状态，避免循环滚动
          if (!this.isSyncing) {
            // 设置标志位为 true，表示正在同步，防止下一个表格再触发滚动事件
            this.isSyncing = true;

            // 同步第二个表格的横向滚动条位置，设置为与第一个表格的滚动位置相同
            secondTableWrapper.scrollLeft = firstTableWrapper.scrollLeft;

            // 同步完成后，重置标志位为 false，表示可以继续进行下次滚动同步
            this.isSyncing = false;
          }
        });

        // 添加第二个表格的滚动事件监听器，当用户在第二个表格上滚动时触发
        secondTableWrapper.addEventListener('scroll', () => {
          // 同样的逻辑，检查是否已经在同步，避免触发死循环
          if (!this.isSyncing) {
            // 设置标志位为 true，表示正在同步滚动条
            this.isSyncing = true;

            // 同步第一个表格的横向滚动条位置，设置为与第二个表格的滚动位置相同
            firstTableWrapper.scrollLeft = secondTableWrapper.scrollLeft;

            // 同步完成后，重置标志位为 false，表示可以继续进行下次滚动同步
            this.isSyncing = false;
          }
        });
      }
    },
}