簡體   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