antdv table 监听滚动条事件

💖注：Ant Design 3版本，页脚已可以跟着表格滚动。

项目：Vue2 + Ant Design 1.7版本

需求：在表格需要左右滚动时，页脚显示的内容也随之滚动。

记录下实现方式。

方法:

      <a-table
        ref="myTable"
        :scroll="{ x: 3000 }"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template slot="footer">
          <div class="footer">
            <div ref="myFooter"> 
              页脚的内容。。。
            </div>
          </div>
        </template>
      </a-table>

.footer {
  height: 28px;
  position: relative;
  div {
    position: absolute;
    left: 0px;
    // left根据滚动条变动
    width: 3000px;
  }
}

  methods: {    
    onScrollHandle(event) {
      if (this.dataSource.length) {
        const scrollLeft = event.target.scrollLeft;
        let myFooter = this.$refs.myFooter;
        this.$nextTick(() => {
          myFooter.style.left = `${0 - scrollLeft}px`;
        });
      }
    },
  },
  mounted() {
    this.$refs.myTable.$el
      .querySelector(".ant-table-body")
      .addEventListener("scroll", this.onScrollHandle);
  },
  beforeDestroy() {
    this.$refs.myTable.$el
      .querySelector(".ant-table-body")
      .removeEventListener("scroll", this.onScrollHandle);
  },