vuetify 数据表搜索无法搜索值

Question

我在 vuetify 数据表上找到了 miss 函数。我认为我的配置是正确的。

这是我的数据表 vuetify

                                    <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line
                                        hide-details></v-text-field>
                                </v-card-title>
                                <v-data-table loading loading-text="Loading... Please wait" :headers="headers"
                                    :items="goodsData" :search="search" :items-per-page="10" class="elevation-1">
                                    <template v-slot:item.typeOfGoods="{ item }">
                                        <div class="userDatatable-inline-title my-3">
                                            <a href="#" class="text-dark fw-500">
                                                <h6 v-if="item.typeOfGoods == 1">Document
                                                    #{{item.receiptNumber}}</h6>
                                                <h6 v-if="item.typeOfGoods == 2">Packet
                                                    #{{item.receiptNumber}}</h6>
                                            </a>
                                            <p class="pt-1 d-block mb-0">
                                                <i class="fas fa-dolly"></i> via {{item.courier}} • Received at
                                                {{item.created_at}}
                                            </p>
                                        </div>
                                    </template>
                                    <template v-slot:item.receiver="{ item }">
                                        <img class="rounded-circle wh-34"
                                            :src="`/dashboard/img/author/profile/`+item.receiver.avatar"
                                            alt="author">&nbsp;
                                        {{item.receiver.name}}
                                    </template>
                                    <template v-slot:item.status="{ item }">
                                        <span class="media-badge color-white bg-primary" v-if="item.status==0">Available
                                            at
                                            receiptionist</span>
                                        <span class="media-badge color-white bg-success" v-if="item.status==1">Well
                                            received</span>
                                        <span class="media-badge color-white bg-danger"
                                            v-if="item.status==2">Terminated</span>
                                    </template>
                                    <template v-slot:item.actions="{item}">
                                        <a href="#" v-on:click="receivedAction(item.id)" v-if="item.status==0"><span
                                                style="color:blue;"><i class="far fa-check-circle"></i> Update
                                                status</span></a>
                                        <a v-if="item.status==1"><span style="color:green;"><i
                                                    class="fas fa-check-circle"></i>
                                                Done</span></a>
                                    </template>
                                </v-data-table>

这是我的脚本数据

                // datatable
                search: '',
                goodsData: [],
                headers: [{
                    text: 'Goods Type',
                    value: 'typeOfGoods'
                }, {
                    text: 'Recipient',
                    value: 'receiver'
                }, {
                    text: 'Status',
                    value: 'status'
                }, {
                    text: 'Actions',
                    value: 'actions',
                    filterable: false,
                    sortable: false
                }],

我已经阅读了有关 codepen 和 https://vuetifyjs.com/en/components/data-tables/#api

的文档

或者你可以看看我的仓库， https://github.com/bintangjtobing/boxity-app/blob/master/resources/js/components/goodsReceipt.vue

你可以在下面看到我的动图

谢谢大家，希望大家帮忙解决这个问题。谢谢谢谢。

Answer 1

搜索只会查找您定义的字段。文本“文档”不在字段中，它在您的模板中。该数字来自 receiptNumber，它未在 headers 或任何地方定义，它只是在模板中。所以搜索也不知道。

您需要提供自己的过滤器功能，正如您链接到的文档在开头所解释的那样。我在这里没有看到这样的定义。

vuetify 数据表搜索无法搜索值

vuetify datatable search cannot search the value

datatable

vue.js

vuetify.js