Vuetify 3中的可滚动表
Vuetify 3中的可滚动表
提问于 2022-04-02 13:49:22
使用Vuetify 3和制表器javascript库来生成表。我可能有一个简单的请求，我想在一个组件中包含一个可滚动的表，它占用了可见浏览器屏幕的空间。我现在只得到一行中的一小部分，没有向下滚动的能力：
我检查了制表器的高度选项，但这不能给我一个可滚动的列表。这是表组件：
<div id="example-table"></div>
</template>
<script>
import { TabulatorFull as Tabulator } from 'tabulator-tables'; // import Tabulator library
export default {
name: 'TabulatorView',
data() {
return {
tabulator: null, // variable to hold your table
tabledata: [],
};
},
mounted() {
this.tabledata = [];
for (let i = 0; i < 55; i += 1) {
this.tabledata.push({
id: i,
name: i,
age: i,
gender: 'male',
rating: 50,
col: 'red',
});
}
this.tabulator = new Tabulator('#example-table', {
data: this.tabledata,
columns: [
{ title: 'Name', field: 'name' },
{ title: 'Gender', field: 'gender' },
{ title: 'Rating', field: 'rating' },
{ title: 'Favourite Color', field: 'col' },
],
layout: 'fitColumns',
// autoColumns: true,
// layout: 'fitData',
// pagination: true,
// height: '411px',
// width: '50%',
// paginationSize: 50,
// paginationSizeSelector: [10, 25, 50, 100],
});
},
};
</script>这是App.vue组件。我在玩v-床单和v-卡，但这可能不是最好的处理方法。
<v-card
class="d-flex row justify-center pa-2"
outlined
stretch
tile >
<div>
<v-sheet
elevation="5"
height="1050"
width="1250"
>
<v-card-header>
<div>
<div class="text-overline mb-1">
OVERLINE
</div>
<div class="text-h6 mb-1">
Headline
</div>
<div class="text-caption">Greyhound divisely hello coldly fonwderfully</div>
</div>
</v-card-header>
<Tabulator />
<v-card-actions>
<v-btn
variant="outlined"
rounded
text
>
Button
</v-btn>
</v-card-actions>
</v-sheet>
</div>
</v-card>
<Miserables />
</v-main>
<v-footer app>
<!-- -->
</v-footer>
</v-app>
</template>
[1]: https://i.stack.imgur.com/d66pO.png回答 1
Stack Overflow用户
发布于 2022-04-02 19:28:26
您可以使用height支柱使表可滚动。这是一个有用的例子。
<template>
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:fixed-header="true"
height="calc(100vh - 200px)"
>
</v-data-table>
</v-app>
</div>
</template>
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: 200,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 200,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 300,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
],
}
},
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71718118
复制相关文章
相似问题