访问Vuetify作用域槽内表colspan的数字属性值

Question

我有一个子组件，它被包含Vuetify v-data表的多个父组件使用，并且该数据表的一部分使用body.prepend插槽。在这种特殊情况下，表结构用于设置一些选择列表，为了与列标题对齐，它使用colspan值：

<v-data-table>
...
<template v-slot:body.prepend>
<tr>
<td colspan="numBlankHeaders"></td>
<td v-if="showPracticeFilter">
<v-select
v-model="selectedPractices"
:items="practices"
label="Select Practice"
multiple
chips
deletable-chips
small-chips
dense
></v-select>
</td>
<td v-if="showSEFilter">
<!-- <v-text-field v-model="selectedSE" type="text" label="SE"></v-text-field> -->
<v-select
v-model="selectedSEs"
:items="ses"
label="Select SE"
multiple
chips
deletable-chips
small-chips
dense
></v-select>
</td>
<td v-if="showStatusFilter">
<v-select
v-model="selectedStatuses"
:items="statuses"
:menu-props="{ maxHeight: '400' }"
label="Select Status"
multiple
chips
deletable-chips
small-chips
dense
></v-select>
</td>
</tr>
</template>
</v-data-table>

但是，colspan的值需要在不同的实现之间有所不同，所以我想传入一个prop值(上面的numBlankHeaders值(。根据props文档页面，您必须使用v-bind来告诉Vue这是一个JS表达式，而不是字符串，所以我定义prop如下：

props:{
numBlankHeaders: {
type: Number,
default: 7
}
}

然后我把它像这样传进来：

<BaseProjectTable
:headers="Oppheaders"
:items="opps"
:search="search"
:loggedInUser="loggedInUser"
title="Opportunities"
:showPracticeFilter=false
:numBlankHeaders="6"
></BaseProjectTable>

然而，我作为道具传递的值根本没有生效，无论我是使用默认值还是如上所述传递值。在最初的代码片段中使用了其他道具(例如<td v-if="showPracticeFilter">(，所以我知道道具正在插槽中使用。我需要更改什么才能使numBlankHeaders道具为colspan值工作？

Answer 1

要绑定属性值，需要在模板中以v-bind:或:为前缀。在您的示例中，这将是colspan:上的冒号前缀

<td :colspan="numBlankHeaders"></td>