Vuetify在创建职位问题的数据表中选择下拉列表

Question

我使用的是有20列的Vuetify数据表。它正在按预期工作。如果数据表有很多列，在水平滚动的帮助下，我们可以查看所有列

我想要标题中每一列的过滤器，使用了v-slot:header并实现了这一点。

我现在面临的问题是，当我们点击选择框时，下拉列表会打开，同时，当你进行水平滚动时。下拉框的位置与选择框没有粘性，它只是挂在屏幕中

生成此问题的代码笔：https://codepen.io/chansv/pen/OJygmjL

重新编程的步骤：

• 打开上面的代码笔
• 单击标题中的选择框
• 打开下拉列表
• 现在使用侧箭头水平滚动数据表
• 下拉列表未粘贴到选择框

这个问题不在垂直滚动中，只在水平滚动中存在这个问题

如果有人也有同样的经历，建议我一些想法来修复这个

这是代码：

<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
hide-default-header
>
<template v-slot:header="{ props }">
<th v-for="(head, index) in props.headers" :key="index"><div>{{head.text}}</div>
<div>
<v-select :items="items" placeholder="select from items"></v-select>
</div>
</th>
</template>
</v-data-table>
</v-app>
</div>
th {
min-width: 250px;
}

new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
items: [
"dessert",
"calories",
"iron",
"fat"
],
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' },
{ 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%',
},
],
}
},
})

提前感谢

Answer 1

我通过向添加附加道具解决了这个问题

https://codepen.io/jkarczm/pen/XWmgajJ

<v-select attach :items="items" placeholder="select from items"></v-select>