Выберите параметры или раскрывающееся меню в столбце в v-data-таблице - PullRequest
Новая
       4

Выберите параметры или раскрывающееся меню в столбце в v-data-таблице

0 голосов
/ 25 февраля 2020

Я хотел создать опции меню в v-data-table 

<v-data-table
      :headers="headers"
      :items="res"
      :options.sync="options"
      :server-items-length="totalRes"
      :loading="loading"
      loading-text="Loading ..... Please wait"
      :footer-props="{
        itemsPerPageOptions: [5, 10, 20, 40],
        itemsPerPageText: 'Res per page',
      }"
      class="elevation-23"
    >
    </v-data-table>

data () {
    return {
        res: [],
        totalRes: 0,
        search: '',
        loading: false,
        options: {
          page: 1,
          itemsPerPage: 40,
        },
        headers: [
      { text: 'Name', value: 'fullName' },
      { text: 'Med', value: 'med' },
      { text: 'Start Date', value: 'startDate' },
      { text: 'Create  ', value: '' },
    ],
    }
},

Здесь у меня есть поле в заголовке Create в этом поле я хочу показать список drop-down скажем, на данный момент ['A', 'B', 'C'] и при нажатии на любые опции среди списка, который я хотел бы направить на определенные маршруты. Как мне это сделать?

Ответы [ 2 ]

1 голос
/ 26 февраля 2020

Вы пробовали Расширяемую строку: https://vuetifyjs.com/en/components/data-tables#expandable -row ?

0 голосов
/ 29 марта 2020

Vuetify v-data-table предоставляет слот для каждого из значений. Я обновил ваш пример, дав последнему столбцу имя путь , чтобы его можно было использовать в ячейке с предметом.

Я добавил v-select , чтобы вы получите эффект выпадающего списка.

Codepen 

    <v-data-table
      :headers="headers"
      :items="res"
      item-key="Name"
      class="elevation-23"
    >
      <template v-slot:item.path="{ item }">
        <v-select
          v-model="cSel"
          :items="item.path"
      ></v-select>
      </template>    
    </v-data-table>


   data () {
    return {
      expanded: [],
      singleExpand: false,
      cSel: 'A',
      res: [
        {
          fullName: 'name 1',
          med: 'med 1',
          startDate: 'start  date 1',
          path:  ['A', 'B', 'C', 'D'],
        },
       ],
       totalRes: 0,
        search: '',
        loading: false,
        options: {
          page: 1,
          itemsPerPage: 40,
        },
        headers: [
      { text: 'Name', value: 'fullName' },
      { text: 'Med', value: 'med' },
      { text: 'Start Date', value: 'startDate' },
      { text: 'Create  ', value: 'path', width: '200' },
     ],      
   }

Для того, что вы пытаетесь сделать, расширенная строка будет работать для размещения ссылок, но если вы захотите Если у вас есть настраиваемое отображение данных (данные представлены в строках или требуются другие преобразования), тогда вы можете рассмотреть именованный слот.

С уважением! ; -J

...