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 分钟前
源网站数据采集方案之解析DOM(四)
前端·chrome
中烟创新2 分钟前
DeepSeek部署实战:模型对比、部署优化与应用场景解析
前端·后端
float_六七2 分钟前
Vue:构建高效UI的渐进式框架
javascript·vue.js·ui
归于尽7 分钟前
别再纠结布局了!Flex 和 Grid 的 “神仙操作” 都在这
前端·css
Point11 分钟前
[ahooks] useCountDown源码阅读
前端·javascript
默默地离开12 分钟前
React中的useLayoutEffect:解决闪烁问题的利器
前端·react.js
mrsk12 分钟前
每天一个小知识点,DRY究竟是什么?
前端·面试·代码规范
用户8417948145614 分钟前
vue vxe-tree 树组件加载大量节点数据,虚拟滚动的用法
vue.js
Nicholas6816 分钟前
Flutter动画框架之SingleTickerProviderStateMixin、TickerProvider、Ticker源码解析(三)
前端
豆豆(设计前端)25 分钟前
解决Vue页面黑底红字遮罩层报错:Unknown promise rejection reason (webpack-internal)
前端·vue.js·webpack