В таблице данных Vuetify столбец таблицы с шаблоном слота - PullRequest
Новая
       23

В таблице данных Vuetify столбец таблицы с шаблоном слота

0 голосов
/ 20 сентября 2019

В таблице данных 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: "Сэм ", префикс:" Доктор "}, {lastName:" Банк ", firstName:" Paul ", префикс:" Jr. "}}

1 Ответ

0 голосов
/ 20 сентября 2019

Я немного поиграл, и я не знаю точную причину, но она больше связана с заголовками.Пока вы помещаете заголовки в нижний регистр, проблема не появляется.Вы можете даже использовать заглавные буквы в слоте

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

...