Ant-Design-Vue 实现a-table表格和按钮联动滚动

最新推荐文章于 2025-09-23 15:19:34 发布

原创最新推荐文章于 2025-09-23 15:19:34 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该代码示例展示了如何在Ant-Design-Vue的a-table组件中实现表格数据与按钮的联动滚动效果。当表格滚动到底部时，会自动切换到下一个按钮对应的数据。点击按钮也可以手动切换数据源。通过定时器控制滚动速度和数据切换，确保了平滑的用户体验。

Ant-Design-Vue 实现a-table表格和按钮联动滚动

需求描述

页面上有A, B,C 三个按钮和一个a-table ,
当选中A时, 表格展示A的数据并开始向下滚动, 当到达最下方时,按钮B选中,表格展示B的数据并重新开始滚动
如此循环…
默认选中A

解决


<template>
  <div>
    <!-- 三个按钮 -->
    <div
      v-for="(item, index) in btnList"
      :key="index"
      @click="btnClick(index, item)"
    >
      {{ item }}
    </div>

    <!-- 表格 -->
  <div>
    <a-table
      :columns="columns1"
      :data-source="tableData1"
      class="tableScoll"
    >
    </a-table>
  </div>
   

  </div>
</template>
<script>
export default {
  data() {
    return {
      columns1: [],
      tableData1: [],
      currentIndex: 0,
      btnList: ['A', 'B', 'C'],
      timers: null,
    }
  },
  mounted() {
    this.getdata()
  },
  beforeDestroy() {
    clearInterval(this.timers) // 销毁定时器
  },
  methods: {
    scollTable() {
      let scrollTop = 0
      clearInterval(this.timers)
      this.timers = setInterval(() => {
        const scrollHeight = document.querySelectorAll(`.tableScoll .ant-table-body`)[0].scrollHeight
        const clientHeight = document.querySelectorAll(`.tableScoll .ant-table-body`)[0].clientHeight
        const scroll = scrollHeight - clientHeight
        // 获取当前滚动条距离顶部高度		tableRect是a-table标签名
        if (scrollTop != 0) {
          scrollTop = document.querySelectorAll(`.tableScoll .ant-table-body`)[0].scrollTop
        }
        // 向下滚动
        if (scrollTop <= scroll) {
          // 滚动速度
          scrollTop = scrollTop + 2
          document.querySelectorAll(`.tableScoll .ant-table-body`)[0].scrollTop = scrollTop // 滚动
          // 距离顶部高度  大于等于 滚动长度
          if (scroll <= scrollTop) {
            this.currentIndex++
            // 滚动到底部 停止定时器
            if (this.currentIndex == 0 || this.currentIndex > 2) {
              this.currentIndex = 0
              this.itemTitle = 'A'
            } else if (this.currentIndex == 1) {
              this.itemTitle = 'B'
            } else if (this.currentIndex == 2) {
              this.itemTitle = 'C'
            }

            clearInterval(this.timers)
            this.timers = null
            this.getdata()
          }
        }
      }, 100) // 滚动速度
    },

    getdata() {
      getHttpdata(this.itemTitle).then((res) => {
        this.tableData1 = res.data
        this.$nextTick(() => {
          this.scollTable()
        })
      })
    },
    btnClick(index, item) {
      this.currentIndex = index
      if (item == 'A') {
        this.itemTitle = 'A'
      } else if (item == 'B') {
        this.itemTitle = 'B'
      } else if (item == 'C') {
        this.itemTitle = 'C'
      }
      this.getdata()
    },
  }
}
</script>