vuetify.js - Vuetify 数据表中,带有槽模板的表列
问题描述
在Vuetify数据表中,对于带有槽模板的表列,可以使用Camel大小写的列名,目前仅支持列名,例如模型中的小写
这不起作用:
<template v-slot:item.firstName="{item}">
<span>{{item.prefix}} {{item.firstName}} {{item.lastName}} </span>
</template>
这有效:
<template v-slot:item.firstname="{item}">
<span>{{item.prefix}} {{item.firstname}} {{item.lastname}} </span>
</template>
我的数据模型具有这样的属性。
contactsList: {
{lastName : "Ray",
firstName : "Sam",
prefix : "Dr."},
{lastName : "Bank",
firstName : "Paul",
prefix : "Jr."}}
解决方案
我玩了一下,我不知道确切的原因,但它似乎与标题更相关。只要您将标题以小写形式放置,问题就不会出现。您甚至可以将插槽中的每个字母大写
HTML:
<div id="app">
<v-app id="inspire">
<div>
<v-data-table
:headers="headers"
:items="items"
>
<template v-slot:item.firstNaMe="{item}">
<span>test1</span>
</template>
<template v-slot:item.Lastname="{item}">
<span>test2</span>
</template>
</v-data-table>
</div>
</v-app>
</div>
JS:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
items: [
{firstName: 'John', Lastname: 'Doe' },
{firstName: 'Jane', Lastname: 'Doe' }
],
headers: [
{ text: 'first name', value: 'firstname' },
{ text: 'last name', value: 'lastname' }
],
}
},
})
代码笔: https ://codepen.io/reijnemans/pen/oNvQKje ?editors=1010
推荐阅读
- flutter - Flutter:Container + ListView 可滚动
- python - 在 List Comprehension 中使用 dict.get for if elif 和 else
- php - 仅当管理员登录并为 php 中的用户禁用时,我如何启用链接
- php - Cron 作业 - 更新产品
- node.js - 流星'找不到模块'加密'
- java - 在 android Studio 中使用 Firestore 数据库实现一对一聊天应用程序的逻辑是什么?
- python - 遍历python beautifulsoup中的多个div,输出到df然后是csv
- apache-spark - 如何拦截流事件(相当于StreamingListener)?
- git - 如何强制 git 使用 SSH 身份验证?
- javascript - 历史 pushState 抛出 Uncaught DOMException