1

我有一个由多个父组件使用的子组件，其中包含一个 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值需要在实现之间有所不同，所以我想传入一个 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价值？

4

1 回答 1

1

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

<td :colspan="numBlankHeaders"></td>
于 2020-07-24T20:28:19.453 回答