在 Vuetify 的 v-data-table 组件中实现顶部和底部水平滚动条

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

在 Vuetify 的 v-data-table 组件中实现顶部和底部水平滚动条

2025-10-19

浏览次数：次

返回列表

在 vuetify 的 v-data-table 组件中实现顶部和底部水平滚动条

本文旨在提供一种解决方案，实现在 Vuetify 的 `v-data-table` 组件中同时拥有顶部和底部水平滚动条。通过创建额外的元素并同步它们的滚动行为，可以模拟出双滚动条的效果，从而提升用户在处理宽表格时的体验。本文将提供原生 J*aScript 和 Vue 的实现示例，帮助开发者快速集成到项目中。

在 v-data-table 中实现顶部和底部水平滚动条，并非直接通过 Vuetify 组件的属性配置完成，而需要一些额外的技巧。因为单个 HTML 元素在同一方向上不能拥有多个滚动条。解决思路是创建两个元素，一个作为实际内容展示（v-data-table），另一个作为顶部滚动条的“代理”，通过 J*aScript 将两个元素的滚动行为关联起来，实现同步滚动。

原生 J*aScript 实现

以下是使用原生 J*aScript 实现双向滚动条的示例代码：

window.addEventListener("DOMContentLoaded", () => {
  const updateScrollers = () => {
    dummy.style.width = _b.scrollWidth + "px";
  };
  updateScrollers();
  window.addEventListener("resize", updateScrollers);

  const linkScroller = (a, b) => {
    a.addEventListener("scroll", (e) => {
      b.scrollLeft = e.target.scrollLeft;
    });
  };
  [
    [_a, _b],
    [_b, _a],
  ].forEach((args) => linkScroller(...args));
});

对应的 CSS 样式：

#_a,
#_b {
  overflow-x: auto;
}

.content {
  height: 100px;
  width: 200vw;
}
#_a > div {
  height: 1px;
}
#_b .content {
  background: repeating-linear-gradient(
    45deg,
    #fff,
    #fff 50px,
    #f5f5f5 50px,
    #f5f5f5 80px
  );
}

HTML 结构：

<div id="_a">
  <div id="dummy"></div>
</div>
<div id="_b">
  <div class="content"></div>
</div>

代码解释：

updateScrollers 函数：用于设置顶部滚动条代理元素的宽度，使其与实际内容宽度一致。
linkScroller 函数：用于监听滚动事件，并将一个元素的滚动位置同步到另一个元素。
DOMContentLoaded 事件监听器：在页面加载完成后执行，初始化滚动条并监听窗口大小变化，以便更新滚动条宽度。

Vue 实现

以下是使用 Vue 实现双向滚动条的示例代码：

BrandCrowd

一个在线Logo免费设计生成器

200 查看详情 BrandCrowd

<template>
  <div id="app">
    <div
      class="scroller"
      @scroll.passive="onScroll"
      :scroll-left.camel="scrollLeft"
    >
      <div ref="dummy"></div>
    </div>
    <div
      ref="scrolled"
      class="scrolled"
      @scroll.passive="onScroll"
      :scroll-left.camel="scrollLeft"
    >
      <span />
    </div>
  </div>
</template>

<script>
import { createApp, onMounted, onBeforeUnmount, reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      scrolled: null,
      dummy: null,
      scrollLeft: 0,
      onScroll: (e) => (state.scrollLeft = e.target.scrollLeft),
    });

    const updateScroller = () => {
      state.dummy.style.width = state.scrolled.scrollWidth + "px";
    };

    onMounted(() => {
      window.addEventListener("resize", updateScroller);
      updateScroller();
    });

    onBeforeUnmount(() => {
      window.removeEventListener("resize", updateScroller);
    });

    return toRefs(state);
  },
};

createApp(App).mount("#app");
</script>

<style scoped>
.scroller,
.scrolled {
  overflow-x: auto;
}
.scroller > div {
  height: 1px;
}
.scrolled span {
  height: 100px;
  display: inline-block;
  width: 200vw;
  background: repeating-linear-gradient(
    45deg,
    #fff,
    #fff 50px,
    #f5f5f5 50px,
    #f5f5f5 80px
  );
}
</style>

代码解释：

reactive 用于创建响应式状态，包括滚动位置 scrollLeft，以及对顶部滚动条代理元素和实际内容元素的引用。
onScroll 函数：用于监听滚动事件，并更新 scrollLeft 的值，从而同步两个滚动条的位置。
updateScroller 函数：用于设置顶部滚动条代理元素的宽度，使其与实际内容宽度一致。
onMounted 和 onBeforeUnmount 生命周期钩子：用于在组件挂载后添加和卸载窗口大小变化监听器。
:scroll-left.camel="scrollLeft"：使用 Vue 的 v-bind 指令将 scrollLeft 的值绑定到元素的 scrollLeft 属性，实现双向数据绑定。