具有自动完成组件的Vuetify数据表搜索道具

Question

我正在尝试为我的vuetify数据表中的每一列配置一个下拉过滤器。似乎vuetify自动完成组件具有我想要的功能，但是我不确定如何从自动完成组件中获取值以过滤数据表。这是我所拥有的：

<template>
  <v-card>
    <v-card-title>
      {{gridTitle}}
      <v-spacer></v-spacer>
    </v-card-title>
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="dataSource"
      class="elevation-1"
      :search="search"
      :loading="isloading"
      item-key="id"
      show-select
      multi-sort
      dense
    >

    <template v-slot:header.id="{ header }" >
    <v-autocomplete
        v-model="search"
        :items="dataSource"
        item-text="id"
        :label="header.value"
        v-bind="selected"
        dense
        multiple
        chips
        small-chips
        filled
      >
      </v-autocomplete>
    </template>
      <v-progress-linear
        slot="progress"
        color="blue"
        indeterminate
      ></v-progress-linear>

      <v-alert
        slot="no-results"
        :value="true"
        color="error"
        icon="warning"
      >Your search for "{{ search }}" found no results.</v-alert>
    </v-data-table>
  </v-card>
</template>

<script>
export default {
  name: "ConfirmationsGrid",
  data() {
    return {
      isloading: true,
      search: "",
      selected: [],
    };
  },
  props: {
    dataSource: {
      type: Array[Object],
      default: new Array(),
    },
    headers: Array[String], 
    gridTitle: String,
  },
  mounted() {
    this.isloading = false;
  },
  methods: {
    onSelectMethod: function (value) {
      this.$emit("select_method", value);

    },
  },
};
</script>

目前，我正在测试一个标题。插槽，但我打算扩展到所有标头。这会将自动完成功能呈现为列标题，并在下拉列表中显示正确的值，但选择它们不会过滤表。我只收到以下错误：

[Vue warn]: Invalid prop: type check failed for prop "search". Expected String with value "2579034", got Array

关于如何将自动完成数据转换为字符串的任何想法？

Answer 1

您正在将道具multiple添加到带有v-model search的v-autocomplete标签中，因此它将返回一个数组，即：]]

["search option1", "searchOption2"]
但是带有v-model selected的v-autocomplete标签将搜索属性用作String，所以这是错误的原因。

v-autocomplete标记的搜索道具的默认行为是将传递给它的字符串与选项中的每个值进行匹配。

要对其进行测试，请删除搜索v-autocomplete标签中的multiple道具，然后可以看到它起作用。

现在，为了处理多个单词，您可以将计算属性作为第一个v-autocomplete的项目：

...    
computed: {
  itemsForSelected() {
    if (this.search.length) {
      return this.dataSource.filter(item => this.search.includes(item))
    }
    return this.dataSource
  }
}
...

<template>
  <v-card>
    <v-card-title>
      {{gridTitle}}
      <v-spacer></v-spacer>
    </v-card-title>
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="itemsForSelected"
      class="elevation-1"
      :loading="isloading"
      item-key="id"
      show-select
      multi-sort
      dense
    >

    <template v-slot:header.id="{ header }" >
    <v-autocomplete
        v-model="search"
        :items="dataSource"
        item-text="id"
        :label="header.value"
        v-bind="selected"
        dense
        multiple
        chips
        small-chips
        filled
      >
      </v-autocomplete>
    </template>
      <v-progress-linear
        slot="progress"
        color="blue"
        indeterminate
      ></v-progress-linear>

      <v-alert
        slot="no-results"
        :value="true"
        color="error"
        icon="warning"
      >Your search for "{{ search }}" found no results.</v-alert>
    </v-data-table>
  </v-card>
</template>
现在您可以从第一个v-autocomplete中删除搜索道具，如果您想通过子字符串（“ hol”匹配“ alcohol”）进行搜索，此解决方案将无用，它只是从源中过滤出未在搜索过滤器中选择。更好的解决方案可能是包含正则表达式以匹配更多选项。