Question

在Vuetify数据表中，对于带有插槽模板的表列，可以使用带有驼峰式大小写的列名，当前仅支持列名，例如在模型中使用小写

这不起作用：

   <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”，前缀：“博士”}， {lastName：“银行”， firstName：“保罗”，前缀：“小”。}}

Answer 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

Answer 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>

在Vuetify数据表中，带有插槽模板的表列

2 个答案: