我正在尝试为我的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
关于如何将自动完成数据转换为字符串的任何想法?
答案 0 :(得分:2)
您正在将道具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”匹配)进行搜索,此解决方案将无用,它只是从来源中过滤出未在搜索过滤器中选择。更好的解决方案可能是包含正则表达式以匹配更多选项。