验证版本:2.6.3 Vue版本:2.6.14
我有一些关于使用vuetify v-data-table和它的v槽定制行的问题。我已经附上了代码吹,当点击分页顶部分组标题(w1,w2,w3)将总是检查意外(有时沿着禁用颜色)和以前选择的组都消失了。任何人都可以为我提供一些解决这个问题的方法
<div id="app">
<v-app id="inspire">
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
item-key="name"
@click:row="handleClick"
class="elevation-1"
group-by='class'
:items-per-page="4"
>
<template v-slot:group.header="{items}">
<th colspan="6">
<v-checkbox :value=items[0].class>
<template v-slot:label>
{{ items[0].class }}
</template>
</v-checkbox>
</th>
</template>
</v-data-table>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
methods:{
handleClick(value)
{
console.log(value)
}
},
data () {
return {
singleSelect: false,
selected: [],
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%',
class: 'w1'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
class: 'w2'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
class: 'w2'
},
{
name: 'Eclair2',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
class: 'w2'
},
{
name: 'Eclair3',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
class: 'w3'
},{
name: 'Eclair4',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
class: 'w3'
},
],
}
},
})
1条答案
按热度按时间3pvhb19x1#
不知道为什么会发生这种情况,我猜是Vue在绘制下一页时试图重用现有的复选框,内部状态变得混乱。
但是,一旦您实际绑定到一个状态,它就会消失,例如,使用以下数据
你能做的
不得不说,
v-checkbox
的 prop 是混乱的,在:value
,:true-value
/:false-value
,:input-value
和:model-value
之间。在文档中,它说
v-model
绑定到:model-value
,但这似乎是错误的,至少在您正在使用的版本中,它绑定到:input-value
(并且它监听的事件是@change
,而不是通常的@input
)。:value
prop只是设置底层input元素的value属性,除非您使用常规表单提交,否则使用它可能没有意义。如果您使用异步表单数据提交,则首选:true-value
和:false-value
。不管怎样,长话短说,最好使用
v-bind
,然后怪异的行为就会停止。