Select options or drop-down menu in a column in v-data-table

user_12140833 0
Viewed 10263

I wanted to create a drop-down menu options in 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: '' },
    ],
    }
},

Here I have a field in header Create in that field I want to show a list of drop-down say for now ['A', 'B', 'C'] and on clicking on any options among the list I wanted to route to certain routes. How do I do it ?

vuejs2 vue-component vuetify.js vue.js
2 Answers

Vuetify v-data-table provides a slot for each of the values. I updated your example by giving the last column the name path so that it may be used in the item slot.

I added the v-select so that you get the drop down effect.

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

For what you are trying to do the expanded row would work to place the links, but if you wanted to have custom data display (the data is in rows, or are other conversions needed) then you may want to consider the named slot.

Regards! ;-J

user_69974880
user_84685300
Related