访问 Vuetify 作用域插槽中 table colspan 的数字属性值
Accessing number prop value for table colspan inside Vuetify scoped slot
我有一个 child 组件被多个 parent 组件使用,其中包含 Vuetify v-data-table,部分数据 table 使用 body.prepend
插槽。在这种特殊情况下,table 结构用于设置一些 select 列表,并且为了与列 headers 对齐,它使用 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 docs 页面,你必须使用 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>
但是,无论我使用默认值还是像上面那样传入一个值,我作为 prop 传入的值根本没有生效。初始代码片段中使用了其他道具(例如 <td v-if="showPracticeFilter">
),所以我知道插槽内正在使用道具。我需要更改什么才能使我的 numBlankHeaders
道具适用于 colspan
值?
为bind an attribute值,需要在模板中加上v-bind:
或:
前缀。在您的示例中,这将是 colspan
:
上的冒号前缀
<td :colspan="numBlankHeaders"></td>
我有一个 child 组件被多个 parent 组件使用,其中包含 Vuetify v-data-table,部分数据 table 使用 body.prepend
插槽。在这种特殊情况下,table 结构用于设置一些 select 列表,并且为了与列 headers 对齐,它使用 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 docs 页面,你必须使用 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>
但是,无论我使用默认值还是像上面那样传入一个值,我作为 prop 传入的值根本没有生效。初始代码片段中使用了其他道具(例如 <td v-if="showPracticeFilter">
),所以我知道插槽内正在使用道具。我需要更改什么才能使我的 numBlankHeaders
道具适用于 colspan
值?
为bind an attribute值,需要在模板中加上v-bind:
或:
前缀。在您的示例中,这将是 colspan
:
<td :colspan="numBlankHeaders"></td>