码迷,mamicode.com
首页 > 其他好文 > 详细

elementUI tree异步树拖拽问题

时间:2020-11-10 10:37:24      阅读:22      评论:0      收藏:0      [点我收藏+]

标签:rop   rgba   一个   rgb   报错   mic   解决方案   行操作   rip   

1.异步树第一层级的节点拖拽报错问题
  报错信息如下:
  技术图片

 

 

原因:
  elementUI在封装tree时,会为tree添加一个页面不可见的根结点,该节点的子集就是树的第一层级的所有节点。
  在节点拖拽时,会根据目标节点的父节点的data的值进行操作。
  而构建异步树时,elementUI忘了给异步树的不可见的跟节点的data属性赋值,所有拖拽至一级节点操作报错。
 
解决方案
  手动为不可见的根结点添加上data的值,具体代码如下
<el-tree
   lazy
   draggable
   ref="asyncTree"
  :load="loadNode"
  :node-key="id"
  :allow-drop="allowDrop"
  >
</el-tree>
...
<scripit>
    ...
    methods: {
        allowDrop (draggingNode, dropNode, type) {
            if(draggingNode.data.id !== dropNode.data.id) {
                if(!dropNode.parent.data) {
                    let temp = [];
                    dropNode.parent.childNodes.forEach(item => {
                        temp.push(item.data)
                    })
            // 手动为跟节点添加上data属性 dropNode.parent.data
= temp; } return true; } }, } ... </script>

 

 

elementUI tree异步树拖拽问题

标签:rop   rgba   一个   rgb   报错   mic   解决方案   行操作   rip   

原文地址:https://www.cnblogs.com/heyefengyin/p/13948316.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!