当前位置：首页 > VUE

vue实现表格滑动

2026-03-29 14:10:38VUE

Vue实现表格滑动的方法

使用CSS实现横向滚动

在表格外层容器设置固定宽度和overflow-x: auto，确保内容超出时出现滚动条。表格宽度需大于容器宽度才能触发滚动。

<div class="table-container">
  <table class="scrollable-table">
    <!-- 表格内容 -->
  </table>
</div>

.table-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}
.scrollable-table {
  min-width: 800px; /* 大于容器宽度 */
}

使用第三方库（如vxe-table）

安装vxe-table库后，可直接使用内置的滚动功能：

vue实现表格滑动

npm install vxe-table

<template>
  <vxe-table
    :data="tableData"
    border
    height="300px" /* 固定高度触发纵向滚动 */
    :scroll-x="{ gt: 0 }" /* 横向滚动配置 */
  >
    <vxe-column type="index"></vxe-column>
    <!-- 其他列定义 -->
  </vxe-table>
</template>

自定义指令实现拖动滚动

通过Vue指令监听鼠标事件实现拖动滚动效果：

vue实现表格滑动

Vue.directive('scroll', {
  bind(el) {
    let isDown = false;
    let startX;
    let scrollLeft;

    el.addEventListener('mousedown', (e) => {
      isDown = true;
      startX = e.pageX - el.offsetLeft;
      scrollLeft = el.scrollLeft;
    });

    el.addEventListener('mouseleave', () => isDown = false);
    el.addEventListener('mouseup', () => isDown = false);

    el.addEventListener('mousemove', (e) => {
      if (!isDown) return;
      e.preventDefault();
      const x = e.pageX - el.offsetLeft;
      const walk = (x - startX) * 2;
      el.scrollLeft = scrollLeft - walk;
    });
  }
});

<div v-scroll class="scroll-container">
  <!-- 可拖动滚动的内容 -->
</div>

移动端触摸滚动优化

针对移动设备添加触摸事件支持：

el.addEventListener('touchstart', (e) => {
  isDown = true;
  startX = e.touches[0].pageX - el.offsetLeft;
  scrollLeft = el.scrollLeft;
});

el.addEventListener('touchend', () => isDown = false);

el.addEventListener('touchmove', (e) => {
  if (!isDown) return;
  const x = e.touches[0].pageX - el.offsetLeft;
  const walk = (x - startX) * 2;
  el.scrollLeft = scrollLeft - walk;
});

性能优化建议

对于大数据量表格，建议配合虚拟滚动技术（如vue-virtual-scroller）使用：

npm install vue-virtual-scroller

<template>
  <RecycleScroller
    class="scroller"
    :items="tableData"
    :item-size="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <!-- 渲染单行内容 -->
    </template>
  </RecycleScroller>
</template>