1

数据表上的扩展槽在包装器组件内不起作用

我有一个围绕 v-data-table 的包装器组件,如下所示:

<template>
  <div>
    <wrapper-data-table
            :headers="tableHeaders"
            :items="partLines"
            :expand="expand"
        >
            <template v-slot:items="line">
                <tr @click="line.expanded = !line.expanded">
                    <td>{{ line.item.binLocation }}</td>
                    <td>{{ line.item.reqQuantity }}</td>

                </tr>
            </template>
            <template v-slot:expand="line">
                  <v-card flat>
                     <v-card-text>Peek-a-boo!</v-card-text>
                  </v-card>
           </template>          
        </wrapper-data-table>
   </div>
</template>

包装数据表组件

<template>
  <div>
    <div>
      <v-data-table
        v-model="selected"
        v-bind.sync="tableProps"
        :expand="expand"
        item-key="name"
      >
        <!-- Pass on all slots -->
        <slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot" />

        <!-- Pass on all scoped slots -->
        <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
          <slot :name="slot" v-bind="scope" />
        </template>
      </v-data-table>
    </div>
  </div>
</template>

我正在通过所有大部分工作正常的范围插槽。但是扩展槽似乎不起作用。我想在行单击时展开行,就像文档中的示例一样。

如果我在没有包装器的情况下直接使用数据表,它就可以工作。但是,当它被包裹时,没有扩展。我可以看到“扩展”道具正在改变。

4

0 回答 0