如何让表格的某些列包含一个下拉框来过滤表格？

Question

我正在使用 VueJs 和 Vuetify。我有 Vuetify 的表格，用于展示数据。我正在尝试编辑某些列的标题列，以便我可以添加下拉搜索栏来过滤表格。类似于：

其中 Select Item 实际上是标题（请参阅旁边的排序符号）。我可以将其添加到表格上方的下拉菜单中，就像官方文档中所示的那样，但我试图将下拉菜单设置为标题列本身，而不仅仅是表格上方。

当前代码：

<v-data-table
  class="elevation-1"
  :headers="headers"
  :items="items"
  :items-per-page="tableItemsPerPage"
  :footer-props="tableFooterSettings"
  :loading="tableLoading"
  hide-default-footer
>

其中 headers 是一个简单的标题数组，例如：

{ text: 'data', value: 'pretty_data', align: 'center', sortable: true },

当然，我希望该列仍然可排序（就像图像[箭头]中所示）。我怎样才能完成它？

Answer 1

创建了这个工作演示。希望它能按照您的期望工作。

new Vue({
  el: '#app',
  data: () => ({
    selected: [],
    headers: [
      {
        text: 'Name',
        align: 'left',
        value: 'name'
      }
    ],
    filters: {
      name: []
    },
    desserts: [
      {
        name: 'Frozen Yogurt'
      },
      {
        name: 'Ice cream sandwich'
      },
      {
        name: 'Eclair'
      },
      {
        name: 'Cupcake'
      },
      {
        name: 'Gingerbread'
      },
      {
        name: 'Jelly bean'
      },
      {
        name: 'Lollipop'
      },
      {
        name: 'Honeycomb'
      },
      {
        name: 'Donut'
      },
      {
        name: 'KitKat'
      }
    ]
  }),
  computed: {
    filteredDesserts() {
      return this.desserts.filter(d => {
        return Object.keys(this.filters).every(f => {
          return this.filters[f].length < 1 || this.filters[f].includes(d[f])
        })
      })
    }
  },

  methods: {
    columnValueList(val) {
      return this.desserts.map(d => d[val])
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<div id="app">
  <v-app id="inspire">
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="filteredDesserts"
      item-key="name"
      class="elevation-1"
    >
      <template slot="headers" slot-scope="props">
        <tr class="grey lighten-3">
          <th
            v-for="header in props.headers"
            :key="header.text"
          >
            <div v-if="filters.hasOwnProperty(header.value)">
              <v-select flat hide-details small multiple clearable :items="columnValueList(header.value)" v-model="filters[header.value]">
              </v-select>
            </div>
          </th>
        </tr>
      </template>
      <template slot="items" slot-scope="props">
        <tr>
          <td>{{ props.item.name }}</td>
        </tr>
      </template>
    </v-data-table>
  </v-app>
</div>