在 v-data-table 的列中选择选项或下拉菜单答案

【问题标题】：Select options or drop-down menu in a column in v-data-table在 v-data-table 的列中选择选项或下拉菜单
【发布时间】：2020-06-09 12:12:55
【问题描述】：

我想在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']，然后单击列表中的任何选项，我想路由到某些路由。我该怎么做？

【问题讨论】：

这个链接stackoverflow.com/a/54129956/7714663能回答你的问题吗？
@this.girish 我正在使用 vuetify，我可以将 vuetify 的 v-data-table 与元素结合起来吗？因为他们都不同，我不这么认为
对不起，我不是 Vue 专家，我只是想帮助你，其他人很快就会回答这个问题。

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

您是否尝试过展开式行：https://vuetifyjs.com/en/components/data-tables#expandable-rows？

【讨论】：

【解决方案2】：

Vuetify v-data-table provides a slot 为每个值。我更新了您的示例，将最后一列命名为 path，以便它可以在项目槽中使用。

我添加了 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

【讨论】：