Vue2 ElementUI Tree 拖动目标节点能否被放置及获取放置位置

一、背景:需求只允许拖动节点的先后顺序,不允许跨层级

二、代码及相关解释

javascript 复制代码
<template>
    <el-tree
        ref="tree"
        :data="data"
        node-key="id"
        draggable
        highlight-current
        :allow-drop="allowDrop"
        @node-drop="drapNode">
    </el-tree>
</template>
<script>
export default {
    data () {
        return {
            data: []
        }
    },
    methods: {
        allowDrop (draggingNode, dropNode, type) { //只允许拖动节点调整与兄弟节点的前后顺序
            return dropNode.data[type==='inner'?'id':'parentId']===draggingNode.data.parentId;
        },
        drapNode (draggingNode, dropNode, dropType) { //只有当节点完成拖动时,dropType才是正确的拖动节点与目标节点的关系
            let list = this.$refs.tree.getNode(dropNode.data[dropType==='inner'?'id':'parentId']).data.children, index = list.findIndex(li => li.id===draggingNode.data.id); //list:完成拖动后的兄弟节点;index:拖动后是父节点的第几个子元素
            //....操作代码,成功后刷新树
        }
    }
}
</script>
相关推荐
孤酒独酌1 天前
一次断网重连引发的「模块加载缓存」攻坚战
前端
jinzeming9991 天前
Vue3 PDF 预览组件设计与实现分析
前端
编程小Y1 天前
Vue 3 + Vite
前端·javascript·vue.js
GDAL1 天前
前端保存用户登录信息 深入全面讲解
前端·状态模式
大菜菜1 天前
Molecule Framework -EditorService API 详细文档
前端
Anita_Sun1 天前
😋 核心原理篇:线程池的 5 大核心组件
前端·node.js
灼华_1 天前
Web前端移动端开发常见问题及解决方案(完整版)
前端
_请输入用户名1 天前
Vue3 Patch 全过程
前端·vue.js
孟祥_成都1 天前
nest.js / hono.js 一起学!字节团队如何配置多环境攻略!
前端·node.js
用户4099322502121 天前
Vue3数组语法如何高效处理动态类名的复杂组合与条件判断?
前端·ai编程·trae