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>
相关推荐
从文处安22 分钟前
「前端何去何从」混乱到有序的状态管理: Reducer 与 Context
前端·react.js
名字都不重要何况昵称28 分钟前
Color Pick 2D(多 Canvas 像素拾取)
前端·canvas
BY组态1 小时前
Ricon组态系统技术深度解析:打造高性能Web可视化平台
前端·物联网·iot·web组态·组态
山屿落星辰1 小时前
Flutter 高级特性实战:动画、自定义绘制、平台通道与 Web 优化
前端·flutter
弹简特2 小时前
【Vue3速成】01-npm+vue初体验+vite构建vue工程化
vue.js·arcgis·npm
@菜菜_达2 小时前
jquery.inputmask插件介绍
前端·javascript·jquery
QuZhengRong2 小时前
【Luck-Report】缓存
java·前端·后端·vue·excel
jiayong232 小时前
前端面试题库 - 浏览器与网络篇
前端·网络·面试
Csvn2 小时前
小程序开发:微信小程序与 uni-app 实战指南
前端
摸鱼小李上线了2 小时前
vue项目页面添加水印实现方法
前端·javascript·vue.js