element-ui中tree组件的同级拖拽

element-ui中tree组件的同级拖拽

HTML结构

 <el-tree 
          style="margin-top: 20px;"  // 样式
          :data="treeList"           // 绑定的tree数组
          node-key="id"              // 每个节点的标识，绑定data后，你要根据每一项的唯一值去绑定
          :highlight-current="true"  // 选中高亮
          @node-click="doChoose"     // 某个项被点击时的回调，能拿到该项的所有数据
          :default-expand-all="false"   // 不展开所有树节点
          :expand-on-click-node="true"  // 点击节点打开
          :default-expanded-keys="expandedKeys" // 默认展开节点的数组
          draggable // 开启可拖拽
          :allow-drop="allowDrop"  // 拖拽时判定目标节点能否被放置
          @node-drop="handleDrop"  // 拖拽成功完成时触发的事件 在这里发送请求，调用刷新列表接口
          >
     <span class="custom-tree-node" slot-scope="{ node, data }">
         <span> {[data.title || data.name]}(章节)</span>
         <span class="custom-tree-node-button">
             <el-button type="text" size="mini" @click="()=>doDrawer('修改')">
                 修改
             </el-button>
             <el-button type="text" size="mini" @click="delData('删除')">
                 删除
             </el-button>
             <el-button type="text" size="mini" @click="() => videoCourse(node, data)">
                 视频课程
             </el-button>
             <el-button type="text" size="mini" @click="() => LiveCourse(node, data)">
                 直播课程
             </el-button>
         </span>
     </span>
</el-tree>

Vue逻辑

new Vue({
    data() {
        return {
            treeList:[]
        }
    },
    methods:{
        async handleDrop(draggingNode, dropNode, dropType, ev) {
            let arr = []
            this.treeList.forEach(item=>{
                arr.push(item.id)
            })
            // 由于接口参数需要顺序调整的Id，存放在arr中
            // 调用顺序调整接口
            let res = await admin_jquery_ajax('post', false,'/api/xxx', {
                ids: JSON.stringify(arr),
            })
            if(res.ret == 1) {
                this.$nextTick(()=>{
                    // 请求成功后，调用刷新列表接口
                    this.getSectionTree(this.sectionData.course_id) 
                })
                // 由于拖动的频率比较高，这里就不打印成功提示信息了
            }else {
                // 失败提示信息
                this.$message.warning(res.msg)
            }
        },
        // 拖拽时判定目标节点能否被放置
        // 'prev'、'inner' 和 'next'，分前、插入、后
        allowDrop(draggingNode, dropNode, type) {
            if (draggingNode.data.level === dropNode.data.level) {
                if (draggingNode.data.parentId === dropNode.data.parentId) {
                    //inner类型为插入，不进入判断
                    // 只有prev和next则返回true
                    return type === "prev" || type === "next";
                } else {
                    return false;
                }
            } else {
                // 不同级进行处理
                return false;
            }
        },
    }
})

以上就是element-ui中tree组件的同级拖拽