繁体   English   中英

在 v-data-table (Vuetify) 的顶部和底部有一个水平滚动条

Have a horizontal scrollbar on the top and bottom of a v-data-table (Vuetify)

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

发生的事情是我有一个 v-data-table,默认情况下我在底部有一个水平滚动条,但我希望这个滚动条在表格下方和上方都有。

我尝试在几个论坛和文章中进行研究,但是在涉及 v-data-table 时没有关于此的信息。

这是我想做的一个例子

1 个回复

从技术上讲,一个 div 在同一方向上不能有多个滚动条。

我们可以做的是创建第二个元素,其虚拟内容与我们要滚动的元素的内容大小相同,然后链接两个元素之间的滚动功能。 简单地说,当我们滚动一个时,我们也滚动另一个。

这是一个普通的实现,展示了原理:

 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)); });
 #_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 ); }
 <div id="_a"> <div id="dummy"></div> </div> <div id="_b"> <div class="content"></div> </div>

如果您需要帮助在您的项目中实现它,您必须首先创建一个可运行的最小、可重现的示例


使用 Vue,我们需要做的就是更新 model 值( onScroll )并让 Vue 处理 DOM 更新(例如: :scroll-left.camel="scrollLeft" )。

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

3 水平对齐来自 Vuetify

我有下表,其中我无法对齐某些项目,例如复选框和操作: 这是表: 我需要对齐v-checkbox和v-icon 。 &lt;style&gt;部分中没有 css。 ...

5 本地搜索 v-data-table Vuetify

我有一个对象数组: productos[] ,我用它来填充v-datatable 。 我一直在尝试添加搜索texfield ,如Vuetify文档所述。 我已经添加了这个,但它只适用于(出于某种原因)带有数字的标题,并且它不起作用,例如当你输入一个字符串时。 我想我做错了什么。 搜索文本字段: ...

6 在 v-data-table Vuetify 中添加超链接

我一直在慢慢学习 vue.js 和 Vuetify 的乐趣。 我正在尝试将电子邮件和网站作为工作链接,但不知道该怎么做。 我有我的 v-data-table 在我的脚本中,我首先: 最后 ...

7 Vuetify,动画 v-data-table tr

我有一个 v-data-table 组件,它偶尔会接收信息,我只想在进入而不是离开时为其设置动画。 vuetify 有内置的过渡(我正在使用)来做到这一点,但我无法在这个特定场景中设置像mode和hide-on-leave这样的道具。 基本上,我的目标是拥有一个包含一定数量这些元素的小部件,一旦 ...

8 vuetify 2 v-data-table 嵌套 for 循环

所以我有这个: 我想用 v-data-table 代替它,但我不能让子数据填充。 这是我被卡住的当前点: 数据模型是(json): 我在这里检查了一些代码笔和问题,但它们都处理数组而不是对象,并且没有键,这可能是我无法显示子数据的原因。 ...

9 Vuetify v-data-table 拖放

我正在使用 V-data-table 和 vuex 存储。 以下是我如何配置 v-data-table 的要点 对每列禁用排序 将 v-data-table 项与 vuex 状态存储数据绑定 使用 sortablejs 拖放行 问题:当我拖放 v-data-table 中的行时,我正在更新 ...

10 在 Vuetify v-data-table 中拖动列

我想通过它们的标题在 v-data-table 中拖动列。 我使用指令/sortablejs 已经取得了相当大的进展,但我无法弄清楚以下内容: 当 &lt;td&gt; 列的数量与 &lt;th&gt; 列的数量不匹配时,我不确定如何解释。 使用 colspan="someNumber" 时会发生这 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM