为什么这些 vuetify 数据表插槽不起作用？

Question

我正在使用 vuetify 数据表

<v-data-table
                :headers="fields"
                :items="items"
                :search="search"
                :mobile-breakpoint="NaN"
                fixed-header
                :loading="isBusy"
            >
                <template v-slot:item="{item,headers}">
                    <tr>
                        <td
                            v-for="(header, index) in headers"
                            :key="index"
                        >{{ header.formatFn(item[header.value]) }}</td>
                    </tr>
                </template>
                <template v-slot:item.userid="{ item }">Abc{{item}}</template>
                <v-alert
                    slot="no-results"
                    :value="true"
                    color="error"
                    icon="warning"
                >Your search for "{{ search }}" found no results.</v-alert>

                <template slot="no-data">No Data Exists!</template>
            </v-data-table>

以下插槽 template v-slot:item.userid="{ item }">Abc{{item}}</template> 因任何我无法弄清楚的原因而无法工作

我的字段数组有一个字段“用户 ID”。

Answer 1

好吧，我找到了解决方法

<tr>
                        <td v-for="(header, index) in headers" :key="index">
                            <span
                                v-if="header.value != 'userid'"
                            >{{ header.formatFn(item[header.value]) }}</span>
                            <span v-else-if="header.value == 'userid'">
                                // do your work
                            </span>
                            <span v-else>{{ header.formatFn(item[header.value]) }}</span>
                        </td>
                    </tr>