小编tuf*_*wes的帖子

有没有办法将 slot 与 vuetify 数据表组件一起使用?

这是我的组件(我们称之为 BaseTable):

  <v-card>
    <v-card-title>
      {{ title }}
      <v-spacer></v-spacer>
      <v-text-field
        :value="value"
        @input="$emit('input', $event)"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :search="value"
      :headers="headers"
      :items="items"
      :loading="loading"
      :loading-text="loadingText"
    >
      <slot></slot> <!--Will pass something here -->
    </v-data-table>
  </v-card>
</template>
Run Code Online (Sandbox Code Playgroud)

然后我想通过操作列中的按钮重用 BaseTable:

 <BaseTable
      :headers="headers"
      :items="items"
      :loading="loading"
      loadingText="Getting items... Please wait"
      title="Transfer Request Processing"
      v-model.lazy="search"
    >
      <template v-slot:item.actions="{ item }">
        <v-btn block color="warning" outlined @click="delete(item)">
          <v-icon left class="mr-2">mdi-icon</v-icon>DELETE
        </v-btn>
      </template>
    </BaseTable>
Run Code Online (Sandbox Code Playgroud)

数据以正确的标题显示,但“删除”按钮却没有。我尝试在组件本身上使用模板(效果很好),但我不希望那样。非常感谢您的帮助。

vue.js vue-component vuetify.js

2
推荐指数
1
解决办法
2105
查看次数

标签 统计

vue-component ×1

vue.js ×1

vuetify.js ×1