美文网首页
基于vuedraggable封装的可拖拽树

基于vuedraggable封装的可拖拽树

作者: 卖手机的程序猿 | 来源:发表于2020-09-29 15:19 被阅读0次

    一、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>

    相关文章

      网友评论

          本文标题:基于vuedraggable封装的可拖拽树

          本文链接:https://www.haomeiwen.com/subject/ogjeuktx.html