vue实现表格滑动

实现表格滑动的基本思路

在Vue中实现表格滑动通常需要结合CSS和JavaScript来控制表格的横向或纵向滚动。常见场景包括固定表头、横向滚动数据区域等。

固定表头+横向滚动实现

<template>
  <div class="scrollable-table-container">
    <div class="table-header">
      <table>
        <thead>
          <tr>
            <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="table-body" @scroll="syncScroll">
      <table>
        <tbody>
          <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
            <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

.scrollable-table-container {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.table-header {
  width: 100%;
  overflow-x: hidden;
}

.table-body {
  width: 100%;
  overflow-x: auto;
  height: calc(100% - 40px);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px 16px;
  border: 1px solid #ddd;
  min-width: 120px;
}

export default {
  data() {
    return {
      headers: ['姓名', '年龄', '地址', '电话', '邮箱', '职位', '部门'],
      rows: [
        // 示例数据
        ['张三', 25, '北京市', '13800138000', 'zhangsan@example.com', '工程师', '研发部'],
        // 更多数据...
      ]
    }
  },
  methods: {
    syncScroll(event) {
      const header = this.$el.querySelector('.table-header')
      header.scrollLeft = event.target.scrollLeft
    }
  }
}

使用第三方库实现高级表格滑动

对于更复杂的需求，可以考虑使用专门的表格组件库：

npm install vue-virtual-scroller

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="table-row">
      <div class="cell">{{ item.name }}</div>
      <div class="cell">{{ item.age }}</div>
      <div class="cell">{{ item.address }}</div>
    </div>
  </RecycleScroller>
</template>

.scroller {
  height: 500px;
  width: 100%;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #eee;
  height: 50px;
  align-items: center;
}

.cell {
  padding: 0 16px;
  min-width: 120px;
}

移动端表格滑动优化

针对移动端触摸滑动体验，可以添加以下CSS增强：

.table-body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

对于更流畅的滚动性能，建议使用CSS的will-change属性：

.table-body {
  will-change: transform;
}

响应式表格滑动方案

当表格宽度超过容器时自动启用横向滚动：

.table-container {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.table {
  min-width: 600px;
}

这种方案适合在响应式布局中，当屏幕尺寸缩小时自动出现滚动条。