vue3+ts使用vuedraggable报错找不到“header“

根据官方文档  下载最新的版本(地址附在下面了)   

也可以直接用命令    npm i -S vuedraggable@next

vue.draggable.next 中文文档 - itxst.com

重点来了  引入的时候 一定要大写  不然就会报错找不到 "header"

import Draggable from "vuedraggable";

然后就可以使用了

<draggable
    :list="columnsCopyList"
    ghost-class="ghost"
    :force-fallback="true"
    :group="{ name: 'list', pull: 'clone' }"
    item-key="id"
    @start="onStart"
    @end="onEnd">
    <template #item="{ element }">
        <div class="item move">
            <label class="move">
                <a-row>
                  <a-col>
                    <i class="paifont pai-liebiao1"></i>
                        <a-checkbox :value="element.dataIndex">
                        {{ element.title}}
                        </a-checkbox>
                  </a-col>
                </a-row>
            </label>
        </div>
    </template>
</draggable>

这个插槽也是必不可少的  不然也会报错  或者是内容显示不出来

<template #item="{ element }">
<div class="item">{{ element.name }}</div>
</template>