vue+antd Table控制多个table横向滚动条同时滚动

最新推荐文章于 2024-05-16 14:54:50 发布

范范_

最新推荐文章于 2024-05-16 14:54:50 发布

阅读量2.4k

点赞数 4

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40853132/article/details/127747774

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. Table表格加上 ref 和 :scroll=“{ x: true}”

 // 第一个表格
 <a-table
    bordered
    ref="demandOriginalTable"
    :columns="demandColumns"
    :row-key="record => record.primaryKey"
    :data-source="demandOriginalData"
    :pagination="false"
    :loading="demandOriginalLoading"
    :scroll="{ x: true }"
    size="small"
  />
  // 第二个表格
  <a-table
     bordered
     ref="demandAdjustmentTable"
     :columns="demandColumns"
     :row-key="record => record.primaryKey"
     :data-source="demandAdjustmentData"
     :pagination="false"
     :loading="demandOriginalLoading"
     :scroll="{ x: true}"
     size="small"
   />
  // 第三个表格
  <a-table
     bordered
      ref="demandConfirmTable"
      :columns="demandColumns"
      :row-key="record => record.primaryKey"
      :data-source="demandConfirmData"
      :pagination="false"
      :loading="demandOriginalLoading"
      :scroll="{ x: true}"
      size="small"
    />

2. 在mounted里面添加监听事件

 mounted() {
    // 监听第一个表格滚动条
    this.$refs.demandOriginalTable.$el.querySelector('.ant-table-body').addEventListener('scroll', this.onScrollHandle);
    // 监听第二个表格滚动条
    this.$refs.demandAdjustmentTable.$el.querySelector('.ant-table-body').addEventListener('scroll', this.onScrollHandle);
    // 监听第三个表格滚动条
    this.$refs.demandConfirmTable.$el.querySelector('.ant-table-body').addEventListener('scroll', this.onScrollHandle);
  },

3.给表格的scrollLeft 赋值

 onScrollHandle(tableRef) {
    const scrollLeft = tableRef.target.scrollLeft;
    this.locationTableScrollLeft(scrollLeft);
  },
  // 保持几个表格滚动条滑动一致
  locationTableScrollLeft(offsetLeft) {
    // 第一个表格
    this.$refs.demandOriginalTable.$el.querySelector('.ant-table-body').scrollLeft = offsetLeft;
    // 第二个表格
    this.$refs.demandAdjustmentTable.$el.querySelector('.ant-table-body').scrollLeft = offsetLeft;
    // 第三个表格
    this.$refs.demandConfirmTable.$el.querySelector('.ant-table-body').scrollLeft = offsetLeft;
  },