element树形控件拖拽allow-drop控制

<el-tree
                    ref="tree"
                    :data="data"
                    :props="props"
                    node-key="id"
                    :allow-drop="collapse"
                    @check-change="onTreeChang"
                    show-checkbox
                    draggable
                    default-expand-all
                    :indent="30"
                >
                </el-tree>

method事件
// 权限拖拽控制
        collapse(moveNode, inNode, type) {

            // return type == 'next';
            // 一级拖动到一级
            if (moveNode.level == 1 && inNode.level == 1) {
                // 四种情况
                if (moveNode.nextSibling == undefined) {
                    return type == 'prev';
                } else if (inNode.nextSibling == undefined) {
                    return type == 'next';
                } else if (moveNode.nextSibling.id !== inNode.id) {
                    return type == 'prev';
                } else {
                    return type == 'next';
                }
            }
            //是否为同级下的子节点
            // 二级拖动到二级
            if (
                moveNode.level == 2 &&
                inNode.level == 2 &&
                moveNode.parent.id == inNode.parent.id
            ) {
                // 四种情况
                if (moveNode.nextSibling == undefined) {
                    return type == 'prev';
                } else if (inNode.nextSibling == undefined) {
                    return type == 'next';
                } else if (moveNode.nextSibling.id !== inNode.id) {
                    return type == 'prev';
                } else {
                    return type == 'next';
                }
            }

            // 二级拖动到一级  或者一级拖住啊到二级
            if (
                (moveNode.level == 2 && inNode.level == 1) ||
                (moveNode.level == 1 && inNode.level == 2)
            ) {
                // 四种情况
                if (moveNode.nextSibling == undefined) {
                    return type == 'prev';
                } else if (inNode.nextSibling == undefined) {
                    return type == 'next';
                } else if (moveNode.nextSibling.id !== inNode.id) {
                    return type == 'prev';
                } else {
                    return type == 'next';
                }
            }
        }
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
element树形控件是一种常见的前端控件,常用于显示层次化结构的数据。其中增加、删除、修改操作在树形控件中也是非常常见的操作。 首先,我们考虑如何添加节点。使用element树形控件的增加节点功能非常简单,首先,需要获取到需要添加节点的父级节点,在父级节点下添加新的节点即可。element树形控件提供了API方法来完成这个操作,如append()等,用户只需要传入新的节点数据,该方法就会自动添加节点到指定的父级节点下。 其次,我们考虑如何进行删除节点。element树形控件提供了API方法来删除节点,在使用该方法时,需要先确定要删除的节点。可以通过节点的id进行查找,然后使用element树形控件提供的remove()方法完成删除操作即可。 最后,我们考虑如何修改节点。对于需要修改的节点,我们首先需要找到该节点,可以使用节点的id值来查找到该节点。找到该节点后,可以使用element树形控件提供的update()方法来完成节点的修改操作。在update()方法中需要传入节点的新数据,该方法就会自动更新节点数据。 总之,使用element树形控件进行节点的增加、删除、修改操作非常简单,只需要使用控件提供的API方法即可完成。这些操作也是我们在开发中所经常遇到的需求,在项目中熟练掌握这些操作是非常有必要的。同时,在掌握这些基础操作的基础上,我们还可以进行一些高级功能的实现,如拖拽操作等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值