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>
相关推荐
小桥风满袖24 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心24 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~28 分钟前
CSS3的新特性
前端·javascript·css3
IT_陈寒34 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询1 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师8 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js