访问 Vuetify 范围插槽内表 colspan 的数字属性值

Posted 2023-02-22

【中文标题】访问 Vuetify 范围插槽内表 colspan 的数字属性值

【英文标题】：Accessing number prop value for table colspan inside Vuetify scoped slot

【发布时间】：2020-11-14 16:44:15

【问题描述】：

我有一个由多个父组件使用的子组件，其中包含一个 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 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>

但是，我作为道具传入的值根本没有生效，无论我使用默认值还是像上面那样传入一个值。在初始代码 sn-p 中使用了其他道具（例如<td v-if="showPracticeFilter">），所以我知道道具正在插槽内使用。我需要进行哪些更改才能使我的 numBlankHeaders 属性适用于 colspan 值？

【参考方案1】：

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

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