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

该代码示例展示了如何在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>


### 关于 Ant Design Vue v1 中实现拖动功能的方法或组件 Ant Design Vue v1 提供了一些基础的交互能力,但在官方文档中并未直接提供内置的“拖动”功能支持。如果需要实现表格列宽调整或其他拖动操作的功能,则可以通过自定义逻辑或者借助第三方库来完成。 #### 自定义实现表格列宽拖动功能 可以参考通用的拖动实现方法[^3],结合 `ant-design-vue` 表格组件 (`<a-table>`) 来扩展拖动功能。以下是具体实现思路: 1. **HTML 结构扩展** 在 `<th>` 元素内部动态添加一个可拖动手柄元素(例如一个小图标),并通过 CSS 定位将其放置在表头单元格的右侧边缘。 2. **监听鼠标事件** 使用 JavaScript 原生事件处理程序绑定 `mousedown` `mousemove` 事件,计算鼠标的移动距离并实时更新对应列的宽度。 3. **设置列宽** 列宽可以通过修改 `<colgroup>` 下的 `<col>` 元素样式属性实现。也可以通过重新渲染表格数据中的 `columns` 配置项来间接控制每列的宽度。 下面是完整的代码示例: ```vue <template> <div> <a-table :columns="columns" :data-source="dataSource"> <!-- 动态生成 th 手柄 --> <span slot="customHeaderCell" slot-scope="column">{{ column.title }}<i class="drag-handle"></i></span> </a-table> </div> </template> <script> export default { data() { return { columns: [ { title: 'Name', dataIndex: 'name', key: 'name', width: 200 }, { title: 'Age', dataIndex: 'age', key: 'age', width: 150 }, { title: 'Address', dataIndex: 'address', key: 'address', width: 300 } ], dataSource: [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' } ] }; }, mounted() { this.initDragHandle(); }, methods: { initDragHandle() { const dragHandles = document.querySelectorAll('.drag-handle'); dragHandles.forEach(handle => { handle.addEventListener('mousedown', (e) => { const thElement = e.target.parentElement; let startX = e.pageX; let startWidth = parseInt(window.getComputedStyle(thElement).width); function onMouseMove(e) { const newWidth = startWidth + (e.pageX - startX); if (newWidth >= 50) { // 设置最小宽度限制 thElement.style.width = `${newWidth}px`; } } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); }); } } }; </script> <style scoped> .drag-handle { position: absolute; top: 0; right: -5px; bottom: 0; width: 10px; cursor: col-resize; } </style> ``` --- #### 使用第三方库增强拖动功能 除了手动实现外,还可以引入一些成熟的拖拽库辅助开发,比如: - **SortableJS**: 支持列表项重排、拖放等功能。 - **interact.js**: 更加灵活的拖拽框架,适用于复杂场景下的拖动需求。 对于简单的列宽调整,推荐使用原生 DOM 操作即可满足;而对于复杂的拖拽行为(如跨区域拖动、多目标联动等),建议优先考虑集成这些外部工具。 --- #### 注意事项 由于 Ant Design Vue v1 已停止维护,部分新特性可能无法兼容现代浏览器环境。因此,在实际项目中应评估升级至更高版本的可能性,以便利用更完善的 API 及社区资源。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码工人笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值