在VUE3环境下,使用draggable组件,代码如下: <draggable v-model="state.waitingRoomPatList" @end="waitingRoomPatEnd" item-key="id" group="bedPatGroup" :options="{ group: { pull: 'clone' }, sort: true }" :move="waitingRoomPatMove" > <template #item="{ element }"> <div></div> </template> </draggable>,报错信息如下:Error: Item slot must have only one child at computeNodes
时间: 2023-07-19 20:25:14 浏览: 83
根据你提供的代码和错误信息,我看到你在 `item` 插槽中只放了一个空的 `div` 元素,这个元素没有任何具体的内容,也就是说没有任何实际的作用,这也是导致报错的原因之一。
你可以在 `item` 插槽中放置一些具有实际内容的元素,比如渲染患者信息的组件或者是一些文字、图片等等,这样才能保证在拖拽操作中真正起到作用。
同时,你需要保证 `item` 插槽中只有一个子元素,否则也会报错。如果你需要在 `item` 插槽中放置多个元素,可以将它们包裹在一个父元素中,然后将这个父元素作为 `item` 插槽的子元素。
最终的代码可能会像这样:
```html
<draggable
v-model="state.waitingRoomPatList"
@end="waitingRoomPatEnd"
item-key="id"
group="bedPatGroup"
:options="{ group: { pull: 'clone' }, sort: true }"
:move="waitingRoomPatMove"
>
<template #item="{ element }">
<div class="patient-card">
<img :src="element.avatar" alt="patient-avatar" />
<div class="patient-info">
<p class="patient-name">{{ element.name }}</p>
<p class="patient-age">{{ element.age }}岁</p>
</div>
</div>
</template>
</draggable>
```
这样就可以避免报错了。