我尝试创建一个 v-data-table,以便我可以使用按钮添加另一个字段,但似乎不起作用。
代码如下: https://codepen.io/gerak/pen/yLBpqqG
问题是当我更改包时 https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js到像这样的最新版本: https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.0.15/vuetify.min.js该表忽略该标签。
HTML
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td >{{ props.item.calories }}</td>
<td>{{ props.item.fat }}</td>
<td><v-btn>Created Button</v-btn></td>
</template>
</v-data-table>
</v-app>
</div>
JS
new Vue({
el: '#app',
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Button field', value: 'buttonField' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
}
]
}
}
})
我没有收到任何错误,只是表格停止出现。会不会是版本问题?
最佳答案
插槽的工作方式不同,每个字段都有模板,要在表格中添加按钮,您可以这样做( https://codepen.io/reijnemans/pen/dybJgjL?editors=1010 ):
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:item.action="{ item }">
<v-btn>Created Button</v-btn>
</template>
</v-data-table>
</v-app>
</div>
JS:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Actions', value: 'action', sortable: false }
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
}
]
}
}
})
关于javascript - <v-data-table> 内的模板 v-slot 在 vue 2.0.15 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57823354/