Css Vuetify选择数据表内的下拉列表创建职位问题
我使用的Vuetify datatable有20列。它正在按预期工作。如果datatable有许多列,通过水平滚动,我们可以查看所有列 我想在标题中的每一列过滤器,使用v-slot:header,并实现了这一点 我现在面临的问题是,当我们单击“选择框”时,下拉列表会打开,同时,当您进行水平滚动时。下拉框的位置与选择框无关,只是挂在屏幕上 生成此问题的代码笔: 重新编程的步骤:Css Vuetify选择数据表内的下拉列表创建职位问题,css,vue.js,vuetify.js,Css,Vue.js,Vuetify.js,我使用的Vuetify datatable有20列。它正在按预期工作。如果datatable有许多列,通过水平滚动,我们可以查看所有列 我想在标题中的每一列过滤器,使用v-slot:header,并实现了这一点 我现在面临的问题是,当我们单击“选择框”时,下拉列表会打开,同时,当您进行水平滚动时。下拉框的位置与选择框无关,只是挂在屏幕上 生成此问题的代码笔: 重新编程的步骤: 打开上面的代码笔 单击标题中的选择框 打开下拉列表 现在使用侧箭头水平滚动数据表 下拉列表不会粘贴到选择框 这个问题
- 打开上面的代码笔
- 单击标题中的选择框
- 打开下拉列表
- 现在使用侧箭头水平滚动数据表
- 下拉列表不会粘贴到选择框
<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%',
},
],
}
},
})
{{head.text}}
th{
最小宽度:250px;
}
新Vue({
el:“#应用程序”,
vuetify:新的vuetify(),
数据(){
返回{
项目:[
“甜点”,
“卡路里”,
“铁”,
“肥胖”
],
标题:[
{
文字:“甜点(100克),
对齐:“开始”,
可排序:false,
值:“名称”,
},
{文本:'卡路里',值:'卡路里'},
{text:'Fat(g'),value:'Fat'},
{text:'Carbs(g)',value:'Carbs'},
{text:'Protein(g'),value:'Protein'},
{文本:'Iron(%)',值:'Iron'},
{文本:'卡路里',值:'卡路里'},
{text:'Fat(g'),value:'Fat'},
{text:'Carbs(g)',value:'Carbs'},
{text:'Protein(g'),value:'Protein'},
{文本:'Iron(%)',值:'Iron'},
],
甜点:[
{
名称:“冷冻酸奶”,
卡路里:159,
脂肪:6.0,
碳水化合物:24,
蛋白质:4.0,
铁:1%,
},
{
名称:“冰淇淋三明治”,
卡路里:237,
fat:9.0,
碳水化合物:37,
蛋白质:4.3,
铁:1%,
},
{
名称:“Eclair”,
卡路里:262,
脂肪:16.0,
碳水化合物:23,
蛋白质:6.0,
铁:7%,
},
{
名字:“纸杯蛋糕”,
卡路里:305,
脂肪:3.7,
碳水化合物:67,
蛋白质:4.3,
铁:8%,
},
{
名称:“姜饼”,
卡路里:356,
脂肪:16.0,
碳水化合物:49,
蛋白质:3.9,
铁:16%,
},
{
名称:“果冻豆”,
卡路里:375,
脂肪:0.0,
碳水化合物:94,
蛋白质:0.0,
铁:0%,
},
{
名称:“棒棒糖”,
卡路里:392,
脂肪:0.2,
碳水化合物:98,
蛋白质:0,
铁:“2%”,
},
{
名称:“蜂巢”,
卡路里:408,
fat:3.2,
碳水化合物:87,
蛋白质:6.5,
铁:45%,
},
{
名称:“甜甜圈”,
卡路里:452,
脂肪:25.0,
碳水化合物:51,
蛋白质:4.9,
铁:22%,
},
{
名称:“KitKat”,
卡路里:518,
脂肪:26.0,
碳水化合物:65,
蛋白质:7,
铁:6%,
},
],
}
},
})
提前感谢我已通过将附加道具添加到解决了此问题
<v-select attach :items="items" placeholder="select from items"></v-select>