基于vuedraggable封装的可拖拽树

一、NPM或yarn安装方式 官方文档

yarn add vuedraggable

npm i -S vuedraggable

import Draggable from "vuedraggable";

components: {

        Draggable

    },

二、定义子组件draw-tree

template

script

script

style

style

三、父组件使用 treeData是一个数组

treeData: [{

        name:"顶级",

        children:[{

          name:"一级1",

        },{

          name:"一级2",

          children:[

            name:"二级1",

          ]

        }]

      }],

<ul>

      <draw-tree

        @changefn="treeChange"

        v-for="(item, index) in treeData"

        :key="index"

        :data="item"

      >

      </draw-tree>

    </ul>