javascript - 访问 Vuetify 作用域槽内表 colspan 的 number prop 值

Question

我有一个子组件，由多个包含 Vuetify v-data-table 的父组件使用，部分数据表使用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 value 需要在实现之间有所不同，因此我想传递一个 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 传入的值根本不会生效。初始代码片段中正在使用其他 Prop (例如 <td v-if="showPracticeFilter"> )，所以我知道插槽内正在使用 Prop 。我需要更改什么才能获得我的 numBlankHeaders为 colspan 工作的支柱值？

Answer 1

致bind an attribute value，需要在模板中添加 v-bind: 或 : 前缀。在您的示例中，这将是 colspan 上的冒号前缀:

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