如何组合两个vuetify数据表的垂直滚动

Question

我已经尝试了很多不同的解决方案来解决这个问题，但都没有成功。如有任何帮助，我们将不胜感激。我试图将三个数据表的垂直滚动组合起来，这样，如果你在其中任何一个数据表上滚动，它们都会垂直滚动。

var scrollers = document.getElementsByClassName("scroll-together");
var scrollersTo = Array.from(scrollers);
scrollersTo.find(function (element){
return element.childNodes[1];
})  
console.log("scrollersTo", scrollersTo)
var scrollerDivs = Array.prototype.filter.call(
scrollers,
function (testElement) {
return testElement.nodeName === "DIV";
},
console.log("scroller", scrollers),
console.log("scroller divs", scrollerDivs)
);
scrollerDivs.forEach(function (element) {
element.addEventListener("scroll", function (e) {
scrollAll(e.target.scrollTop, scrollerDivs);
});
});

在mounted-above中，我试图访问该元素，结果成功了，但似乎我需要在元素中进一步向下导航到索引1的childNode和nodeName(两种不同的方法(。然而，无论我使用哪种方法，这永远不会只返回undefined。

scrollAll(scrollTop, scrollerDivs) {
scrollerDivs.forEach(function (element) {
console.log("scrollALL", scrollTop);
element.scrollTop = scrollTop;
});
}

以上是应该调用方法中滚动的函数

<template>
<v-data-table
:headers="headersSelected"
:items="items"
hide-default-footer
fixed-header
id="optionChainTable"
v-scroll#optionChainTable="scrollOptionChain"
:items-per-page="listLength"
v-sortable-table="{ onEnd: sortTheHeadersAndUpdateTheKey }"
:key="anIncreasingNumber"
item-key="key"
disable-sort
disable-filtering
disable-pagination
class="scroll-together"
>
<!-- v-scroll.self="onScroll" -->
<!-- :loading="isLoading"
-->
<template v-slot:top>
<v-toolbar flat dense>
<template v-if="header == 'Call'">
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
icon
text
small
@click.stop="headersSelectorDialog = true"
>
<v-icon>mdi-table-headers-eye</v-icon>
</v-btn>
</template>
<span class="tooltip">Select Headers</span>
</v-tooltip>
<v-dialog
v-model="headersSelectorDialog"
scrollable
max-width="250px"
>
<v-card>
<v-system-bar color="primary darken-2" dark>
<span class="text-caption">Select Headers</span>
<v-spacer></v-spacer>
<v-icon @click="headersSelectorDialog = false">
mdi-close
</v-icon>
</v-system-bar>
<v-card-text style="height: 400px">
<v-checkbox
dense
v-for="header in headersList"
:key="header.value"
:label="header.text"
hide-details
v-model="header.selectable"
@click="selectHeader(header)"
></v-checkbox>
</v-card-text>
</v-card>
</v-dialog>
</template>
<v-spacer></v-spacer>
<v-toolbar-title>{{ header }}</v-toolbar-title>
<v-spacer></v-spacer>
<template v-if="header == 'Put'">
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
icon
text
small
@click.stop="headersSelectorDialog = true"
>
<v-icon>mdi-table-headers-eye</v-icon>
</v-btn>
</template>
<span class="tooltip">Select Headers</span>
</v-tooltip>
<v-dialog
v-model="headersSelectorDialog"
scrollable
max-width="250px"
>
<v-card>
<v-system-bar color="primary darken-2" dark>
<span class="text-caption">Select Headers</span>
<v-spacer></v-spacer>
<v-icon @click="headersSelectorDialog = false">
mdi-close
</v-icon>
</v-system-bar>
<v-card-text style="height: 400px">
<v-checkbox
dense
v-for="header in headersList"
:key="header.value"
:label="header.text"
hide-details
v-model="header.selectable"
@click="selectHeader(header)"
></v-checkbox>
</v-card-text>
</v-card>
</v-dialog>
</template>
</v-toolbar>
</template>
</v-data-table>
</template>

Answer 1

您可以使用Vuetifyv-scroll并通过使用其id来定位div/表，请参阅此处的滚动目标。

以下是一个工作示例，您可以从中获得想法要获得更好的视图，请在全屏上查看

new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
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%', },
],
};
},
methods: {
scrollTable1() {
const table1 = this.$el.querySelector('#table1');
const table2 = this.$el.querySelector('#table2');
table2.scrollTop = table1.scrollTop;
},
scrollTable2() {
const table1 = this.$el.querySelector('#table1');
const table2 = this.$el.querySelector('#table2');
table1.scrollTop = table2.scrollTop;
}
}
});

#table1 {
max-height: 200px;
overflow: auto;
}
#table2 {
max-height: 200px;
overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<v-row>
<v-col>
<v-data-table
id="table1"
v-scroll:#table1="scrollTable1"
dense :headers="headers"
:items="desserts"
item-key="name"
disable-pagination
hide-default-footer
></v-data-table>
</v-col>
<v-col>
<v-data-table
id="table2"
v-scroll:#table2="scrollTable2"
dense :headers="headers"
:items="desserts"
item-key="name"
disable-pagination
hide-default-footer
></v-data-table>
</v-col>
</v-row>
</v-app>
</div>