Vuetify 数据表中，带有槽模板的表列答案

【问题标题】：In the Vuetify data table, table column with slot templateVuetify 数据表中，带有槽模板的表列
【发布时间】：2020-01-21 01:48:19
【问题描述】：

在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."}}

【问题讨论】：

这能回答你的问题吗？ Vuetify data table with nested data and v-slot:item

标签： vuetify.js vue-tables-2

【解决方案1】：

我玩了一下，我不知道确切的原因，但它似乎与标题更相关。只要您将标题以小写形式放置，问题就不会出现。您甚至可以将插槽中的每个字母大写

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' }
          ],
        }
      },
    })

Codepen：https://codepen.io/reijnemans/pen/oNvQKje?editors=1010

【讨论】：

如果你有一个没有槽的驼峰式钥匙，只有当header.value被分配给小写换位时，单元格才会是空的。因此，就这个答案而言，似乎处理这个问题的方法是，如果您必须使用骆驼式item 插入一些东西，然后将header.value 分配为小写，否则在分配header.value 时使用实际的关键情况.

【解决方案2】：

传递 props 而不是 { item } 用于 v-slot 属性分配。

这样您就不必担心header.value；按原样输入密钥名称，而无需考虑字母大小写。 注意：当你想传递一个对象时，你必须设置为小写。

之前（即 OP 问题中的示例）：

<template v-slot:item.firstName="{item}">
  <span>{{item.prefix}} {{item.firstName}} {{item.lastName}} </span>
</template>

之后：

<template v-slot:item.firstName="props">
  <span>{{props.item.prefix}} {{props.item.firstName}} {{props.item.lastName}} </span>
</template>

【讨论】：