Vuetify v-data-table 上下同时显示水平滚动条的实现方法-html教程-PHP中文网

Vuetify v-data-table 上下同时显示水平滚动条的实现方法

霞舞

发布： 2025-10-18 08:54:13

原创

181人浏览过

vuetify v-data-table 上下同时显示水平滚动条的实现方法

本文介绍了如何在 Vuetify 的 `v-data-table` 组件的顶部和底部同时显示水平滚动条。核心思路是利用两个 `div` 元素，一个用于模拟滚动条，另一个包含实际内容，并通过 JavaScript 将它们的滚动行为同步，从而实现上下滚动条联动效果。提供了原生 JavaScript 和 Vue 两种实现方案，并附带详细代码示例。

在某些场景下，当 v-data-table 的内容宽度超过容器宽度时，底部的水平滚动条可能不够方便。用户需要在表格底部才能进行水平滚动，如果希望在表格顶部也能进行滚动，可以采用以下方法。

原生 JavaScript 实现

这种方法的核心思想是创建两个 div 元素，一个 (#_a) 用于模拟顶部滚动条，另一个 (#_b) 包含实际的表格内容。通过 JavaScript 监听 #_a 和 #_b 的 scroll 事件，并同步它们的 scrollLeft 属性，从而实现联动滚动效果。

HTML 结构:

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

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
  ); /* 模拟表格内容 */
}

登录后复制

JavaScript 代码:

window.addEventListener("DOMContentLoaded", () => {
  const _a = document.getElementById('_a');
  const _b = document.getElementById('_b');
  const dummy = document.getElementById('dummy');

  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));
});

登录后复制

代码解释:

updateScrollers 函数: 在页面加载完成和窗口大小改变时调用，用于设置顶部滚动条的 dummy 元素的宽度，使其与底部内容 #_b 的实际宽度一致，从而保证滚动范围正确。
linkScroller 函数: 接受两个元素 a 和 b 作为参数，监听 a 的 scroll 事件，并在事件处理函数中将 b 的 scrollLeft 属性设置为与 a 相同的值，从而实现滚动同步。
forEach 循环: 将 [_a, _b] 和 [_b, _a] 两个数组传递给 linkScroller 函数，从而实现双向滚动同步。

Vue 实现

在 Vue 中，可以使用 v-model 和 @scroll 事件监听器来实现类似的效果。

HTML 结构:

立即学习“前端免费学习笔记（深入）”；

<script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
<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>

登录后复制

CSS 样式:

.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
  );
}

登录后复制

Vue 代码:

const { createApp, onMounted, onBeforeUnmount, reactive, toRefs } = Vue;
createApp({
  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);
  },
}).mount("#app");

登录后复制

代码解释:

reactive: 使用 reactive 创建一个响应式对象 state，包含 scrolled (底部滚动容器的引用), dummy (顶部滚动容器的占位符引用), scrollLeft (滚动位置) 和 onScroll (滚动事件处理函数)。
onScroll 函数: 监听 scroll 事件，并将事件对象的 scrollLeft 属性赋值给 state.scrollLeft，Vue 会自动更新两个滚动容器的 scrollLeft 属性。
updateScroller 函数: 在组件挂载后和窗口大小改变时调用，用于设置顶部滚动条的 dummy 元素的宽度，使其与底部滚动容器 scrolled 的实际宽度一致。
onMounted 和 onBeforeUnmount: 使用 onMounted 钩子函数在组件挂载后添加窗口大小改变的监听器，并在 onBeforeUnmount 钩子函数中移除该监听器，以避免内存泄漏。
toRefs: 使用 toRefs 将 state 对象转换为一组响应式引用，以便在模板中使用。

将 Vue 实现应用于 v-data-table

要将 Vue 实现应用于 v-data-table，需要进行以下修改：

将 v-data-table 放入 scrolled 容器中。
将 dummy 容器放在 v-data-table 的上方。
确保 scrolled 容器的宽度与 v-data-table 的容器宽度一致。

示例代码:

<template>
  <v-container>
    <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"
    >
      <v-data-table
        :headers="headers"
        :items="desserts"
        :items-per-page="5"
        class="elevation-1"
      ></v-data-table>
    </div>
  </v-container>
</template>

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

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

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

    onMounted(() => {
      state.scrolled = document.querySelector('.scrolled'); // 获取 .scrolled 元素的引用
      state.dummy = document.querySelector('.scroller > div'); // 获取 .scroller > div 元素的引用
      window.addEventListener("resize", updateScroller);
      updateScroller();
    });

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

    return toRefs(state);
  },
  data() {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
          width: 300
        },
        { text: 'Calories', value: 'calories', width: 300},
        { text: 'Fat (g)', value: 'fat', width: 300 },
        { text: 'Carbs (g)', value: 'carbs', width: 300 },
        { text: 'Protein (g)', value: 'protein', width: 300 },
        { text: 'Iron (%)', value: 'iron', width: 300 },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
}
</script>

<style scoped>
.scroller,
.scrolled {
  overflow-x: auto;
}

.scroller > div {
  height: 1px;
}
/* 确保 .scrolled 容器宽度与 v-data-table 的容器宽度一致 */
.scrolled {
  width: 100%; /* 或者根据实际情况设置具体宽度 */
}
</style>

登录后复制

注意事项:

需要确保顶部滚动条的 dummy 元素的宽度与底部内容的实际宽度一致，才能保证滚动范围正确。
需要在窗口大小改变时更新 dummy 元素的宽度。
在 Vue 实现中，需要使用 ref 获取 DOM 元素的引用，并在 onMounted 钩子函数中进行初始化。
CSS 样式需要根据实际情况进行调整，以保证布局正确。
为了更好的性能，在监听滚动事件时，使用了 .passive 修饰符，这可以提高滚动性能，尤其是在移动端设备上。

总结

通过以上方法，可以在 Vuetify 的 v-data-table 组件的顶部和底部同时显示水平滚动条，提升用户体验。选择原生 JavaScript 还是 Vue 实现，取决于项目的具体需求和技术栈。 Vue 实现更加简洁和易于维护，而原生 JavaScript 实现则更加灵活和轻量级。根据实际情况选择最适合的方案。

以上就是Vuetify v-data-table 上下同时显示水平滚动条的实现方法的详细内容，更多请关注php中文网其它相关文章！