element-ui组件库中的Tree树形控件，鼠标右键节点，显示新增，删除，编辑等操作（拖拽，切换等等）

最新推荐文章于 2024-03-05 19:30:00 发布
最新推荐文章于 2024-03-05 19:30:00 发布
阅读量839 收藏 9
点赞数 11
文章标签： ui vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55697644/article/details/134878381
版权

其中包括的方法：

1）节点被点击时候的回调

2）当某一节点被鼠标右键点击时会触发的事件

3）节点开始拖拽时触发的事件

4）拖拽进入其他节点时触发的事件

5）拖拽离开某个节点时触发的事件

6）在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）

7）拖拽结束时（可能未成功）触发的事件

8）判断节点能否被拖拽

9）拖拽时判定目标节点能否被放置。type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后

下面代码里面都有详细说明 需要哪一项功能请自行断查

<template>

<div class="lalala">

    <el-input

          placeholder="输入关键字进行过滤"

          v-model="filterText"

        class="search">

    </el-input>

    <el-tree

          :data="treeData"

          node-key="id"

          default-expand-all

          @node-click="handleLeftclick"

          @node-drag-start="handleDragStart"

          @node-drag-enter="handleDragEnter"

          @node-drag-leave="handleDragLeave"

          @node-drag-over="handleDragOver"

          @node-drag-end="handleDragEnd"

          @node-drop="handleDrop"

          @node-contextmenu="rightClick"

          :filter-node-method="filterNode"

          draggable

          :allow-drop="allowDrop"

          :allow-drag="allowDrag"

        ref="tree">

            <span class="slot-t-node" slot-scope="{ node, data }">

                <span v-show="!data.isEdit">

                <span :class="[data.id>= 99 ? 'slot-t-node--label' : '']">{{node.label}}</span>

                </span>

            <span v-show="data.isEdit">

                <el-input class="slot-t-input" size="mini" autofocus

                      v-model="data.label"

                      :ref="'slotTreeInput'+data.id"

                      @blur.stop="NodeBlur(node,data)"

                      @keydown.native.enter="NodeBlur(node,data)"></el-input>

            </span>

        </span>

    </el-tree>

    <el-card class="box-card" ref="card" v-show="menuVisible">

        <div @click="addSameLevelNode()" v-show="firstLevel">

            <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;同级增加

        </div>

        <div class="add" @click="addChildNode()">

            <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;子级增加

        </div>

        <div class="delete" @click="deleteNode()">

            <i class="el-icon-remove-outline"></i>&nbsp;&nbsp;删除节点

        </div>

        <div class="edit" @click="editNode()">

            <i class="el-icon-edit"></i>&nbsp;&nbsp;修改节点

        </div>

    </el-card>

</div>

</template>

<script>

import '../mock/mockfile.js'

  import axios from 'axios'

  export default {

name:'processManagement',

data () {

return {

eleId:'',

isShow:false,

currentData:'',

currentNode:'',

menuVisible:false,

firstLevel:false,

filterText:'',

maxexpandId:4,

treeData: [{

id:1,

label:'一级 1',

isEdit:false,

children: [{

id:4,

label:'二级 1-1',

isEdit:false,

children: [{

id:9,

label:'三级 1-1-1',

isEdit:false

            }, {

id:10,

label:'三级 1-1-2',

isEdit:false

            }]

}]

}, {

id:2,

label:'一级 2',

isEdit:false,

children: [{

id:5,

label:'二级 2-1',

isEdit:false

          }, {

id:6,

label:'二级 2-2',

isEdit:false

          }]

}, {

id:3,

label:'一级 3',

isEdit:false,

children: [{

id:7,

label:'二级 3-1',

isEdit:false

          }, {

id:8,

label:'二级 3-2',

isEdit:false,

children: [{

id:11,

label:'三级 3-2-1',

isEdit:false

            }, {

id:12,

label:'三级 3-2-2',

isEdit:false

            }, {

id:13,

label:'三级 3-2-3',

isEdit:false

            }]

}]

}],

defaultProps: {

children:'children',

label:'label'

        }

}

},

methods: {

test () {

axios.get('http://test.cn')

.then(response => {

this.isShow = response.data.operations[0].pubResource.isVisiable

            console.log(response.data.operations[0].pubResource)

this.eleId = response.data.operations[0].pubResource.elementId

          })

},

NodeBlur (Node, data) {

debugger

        console.log(Node, data)

if (data.label.length ===0) {

this.$message.error('菜单名不可为空！')

return false

        }else {

if (data.isEdit) {

this.$set(data,'isEdit',false)

console.log(data.isEdit)

}

this.$nextTick(() => {

this.$refs['slotTreeInput' + data.id].$refs.input.focus()

})

}

},

// 查询

      filterNode (value, data) {

if (!value)return true

        return data.label.indexOf(value) !== -1

      },

handleDragStart (node, ev) {

console.log('drag start', node)

},

handleDragEnter (draggingNode, dropNode, ev) {

console.log('tree drag enter: ', dropNode.label)

},

handleDragLeave (draggingNode, dropNode, ev) {

console.log('tree drag leave: ', dropNode.label)

},

handleDragOver (draggingNode, dropNode, ev) {

console.log('tree drag over: ', dropNode.label)

},

handleDragEnd (draggingNode, dropNode, dropType, ev) {

console.log('tree drag end: ', dropNode && dropNode.label, dropType)

},

handleDrop (draggingNode, dropNode, dropType, ev) {

console.log('tree drop: ', dropNode.label, dropType)

},

allowDrop (draggingNode, dropNode, type) {

if (dropNode.data.label ==='二级 3-1') {

return type !=='inner'

        }else {

return true

        }

},

allowDrag (draggingNode) {

return draggingNode.data.label.indexOf('三级 3-2-2') === -1

      },

// 鼠标右击事件

      rightClick (MouseEvent, object, Node, element) {

debugger

        this.currentData = object

this.currentNode = Node

if (Node.level ===1) {

this.firstLevel =true

        }else {

this.firstLevel =false

        }

this.menuVisible =true

        // let menu = document.querySelector('#card')

// /* 菜单定位基于鼠标点击位置 */

// menu.style.left = event.clientX + 'px'

// menu.style.top = event.clientY + 'px'

        document.addEventListener('click',this.foo)

this.$refs.card.$el.style.left =event.clientX +40 +'px'

        this.$refs.card.$el.style.top =event.clientY +10 +'px'

      },

// 鼠标左击事件

      handleLeftclick (data, node) {

this.foo()

},

//  取消鼠标监听事件 菜单栏

      foo () {

this.menuVisible =false

        //  要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了

        document.removeEventListener('click',this.foo)

},

// 增加同级节点事件

      addSameLevelNode () {

let id =Math.ceil(Math.random() *100)

var data = {id:id,label:'新增节点'}

this.$refs.tree.append(data,this.currentNode.parent)

},

// 增加子级节点事件

      addChildNode () {

console.log(this.currentData)

console.log(this.currentNode)

if (this.currentNode.level >=3) {

this.$message.error('最多只支持三级！')

return false

        }

let id =Math.ceil(Math.random() *100)

var data = {id:id,label:'新增节点'}

this.$refs.tree.append(data,this.currentNode)

},

// 删除节点

      deleteNode () {

this.$refs.tree.remove(this.currentNode)

},

// 编辑节点

      editNode () {

debugger

        if (!this.currentData.isEdit) {

this.$set(this.currentData,'isEdit',true)

}

}

},

watch: {

filterText (val) {

this.$refs.tree.filter(val)

}

},

mounted () {

this.test()

}

}

</script>

<style scoped lang="scss">

/*.lalala {*/

/*position: relative;*/

/*}*/

  .text {

font-size:14px;

}

.el-tree{

width:20%;

margin-top:10px;

}

.search{

width:20%;

}

.item {

padding:18px 0;

}

.add{

cursor:pointer;

margin-top:10px;

}

.delete{

margin:10px 0;

cursor:pointer;

}

.edit{

margin-bottom:10px;

cursor:pointer;

}

.search {

cursor:pointer;

}

.box-card {

width:120px;

position:absolute;

z-index:1000;

}

</style>

小哥愿与愁
关注
  • 11
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中使用elementui实现对树组件tree右键增删改功能
蜗牛~~
08-11 5924
vue中实现树组件增删改查功能
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。 增加节点，点击确定后局部刷新，渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-keys="[0]" @node-click="handle
vue实现可新增、编辑、删除、拖拽节点的树形结构el-tree
weixin_54274691的博客
07-22 1102
https://blog.csdn.net/u010098760/article/details/105274830 <template> <div class="custom-tree-container"> <div class="block" style="width:300px"> <p>使用 scoped sl...
【记录31】elementUI el-tree 虚线、右键、拖拽
最新发布
~牧马~
03-05 744
elementUI el-tree 虚线、右键、拖拽。
element-ui el-tree 组件添加右键菜单
Sbaby~的博客
02-25 1万+
在 github 上有一个 vue-context-menu 项目实现了以上功能。具体使用在项目的README.md 中写的十分清楚了。 我的实现效果如图： 实现代码如下： <template> <div> <div id="dataPage"> <el-tree :data="data" id="el-tree" :p...
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
今天在写个后台管理系统，使用了element-ui的组件库。在做角色权限，通过tree控件展示权限列表的时候，用:default-checked-keys绑定数据，这个属性不能实现双向绑定，只能用于初始化选择状态。如果想双向绑定只能使用组件的方法setCurrentKey来实现。想直接绑定数据来的方便，只能修改源码。在tree的源码 属性中重新定义一个属性，在watch中监听，调用 this.store.setCheckedKeys()。以下是作者修改的代码，第一次写博客分享给大家，不喜勿碰，还望更多大神多多指教。 props: { ..... pCheckedKeys: Array, .
element-tree:自定义右键菜单等等
05-11
元素树 一个Vue.js项目 效果 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
Element Ui Tree组件实现增、删、改、查、拖拽节点 的树形结构
qq_45904018的博客
07-07 4235
如： 获取所有权限，匹配改个节点（角色）所包含的权限，修改时默认勾选，List_id 该角色拥有权限的id的集合！2，组件中 :default-checked-keys="List_id" （讲述的可能稍有复杂，代码有注释可以看看！1，其中点击展开/折叠看个人需求；这里就直接展示代码了！（自己引入相关插件）这个是图标不展示问题。
Vue中 el-tree 实现添加右键菜单的方法（图文示例）
大剑师兰特的GIS世界
06-09 2144
node-contextmenu是el-tree一重要的属性， 当某一节点被鼠标右键点击时会触发该事件。共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
[Vue+Element UI] 实现树节点标签可编辑功能
zennnlee的博客
10-30 537
1.可编辑：鼠标悬浮出现目录编辑图标，点击编辑图标，弹出树节点名称修改弹出框进行修改，同时弹出框具备校验功能。2.可删除：点击删除图标，删除相对应节点。
vue-tree:基于vue element-ui的tree控件改装的可编辑，添加，删除带线性结构的tree组件
04-30
vue-tree A Vue.js project Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 1.总体预览 2.编辑 3.新增 4.删除 5.提示
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE3+elementPlus的el-tree添加右键菜单
前端程序猿的博客
07-29 3067
VUE3+elementPlus的el-tree添加右键菜单。
Vue使用elementUI踩坑
GhostPaints的博客
10-13 1458
做项目遇到的坑之前一直没有记录，反复遇到的时候总会有一种似曾相识的感觉，但又忘了当时是怎么解决的。写篇文章持续更新一下平时遇到的问题，不管大小，都记下来。
element tree树结构 “右键自定义菜单”
冰冰酱
03-23 1469
el-tree右键菜单
可视化拖拽组件库一些技术要点原理分析（三）
前端求内推-北京/天津/远程
02-15 771
本文是可视化拖拽系列的第三篇，之前的两篇文章一共对 17 个功能点的技术原理进行了分析： 编辑器 自定义组件 拖拽 删除组件、调整图层层级 放大缩小 撤消、重做 组件属性设置 吸附 预览、保存代码 绑定事件 绑定动画 导入 PSD 手机模式 拖拽旋转 复制粘贴剪切 数据交互 发布 本文在此基础上，将对以下几个功能点的技术原理进行分析： 多个组件的组合和拆分 文本组件 矩形组件 锁定组件 快捷键 网格线 编辑器快照的另一种实现方式 如果你对我之前的两篇文章不是很了解，建议先把这两篇文章看一遍，再来阅读
Element UI中el-tree 添加右键菜单的方法，附带问题和解决方案
2301_76707317的博客
09-22 2930
2、建立一个右键组件，可以使用 el-menu 组件，优点是，可以借助el-menu 的 selec方法进行增删改查以及样式不用手写了，弊端是不容易获取点击的Dom，先暂时这样写吧。想到的解决办法是，点击该节点时，使用原生js的 contextmenu 事件，在事件中用 e.preventDefault（）方法进行阻止。1、在el-tree 中添加方法 @node-contextmenu="rightClick"在右键弹出的组件中，点击右键，会默认弹出浏览器的右键菜单栏；3、点击树状节点时，关闭右键组件。
element-ui 树形控件el-tree右键自定义菜单实现节点增删改
热门推荐
Luo_LA的博客
01-13 1万+
效果展示： 实现步骤： 展示树形文件夹 @node-contextmenu=“floderOption”：element-ui定义的右键点击事件 data为element-ui中自带的json格式的数据 <el-tree :data="data" draggable node-key="id" @node-contextmenu="floderOption"> <span class="custom-tree-node" slot-scope="{ node, data }"&g
基于Element-UI的组件改造的树形选择器显示横向滚动条
05-24
要在基于 Element-UI 的树形选择器中添加横向滚动条，可以通过以下步骤实现： 1. 给树形选择器的样式加上 `overflow-x: auto` 属性，以实现横向滚动条的显示。 2. 为树形选择器中的节点（即 `<el-tree>` 组件）设置一个固定宽度，以便能够在超出容器宽度时触发横向滚动条的显示。 3. 给树形选择器中的每个节点（即 `<el-tree-node>` 组件）设置一个合适的宽度，以保证节点在不同层级之间的对齐。 下面是一个示例代码： ```html <template> <el-tree :data="treeData" show-checkbox :node-key="id" :props="defaultProps" class="horizontal-scroll"> <!-- 自定义节点内容 --> <span class="custom-node" slot-scope="{ node }">{{ node.label }}</span> </el-tree> </template> <script> export default { data() { return { treeData: [ { id: 1, label: 'Node 1', children: [ { id: 11, label: 'Node 1-1' }, { id: 12, label: 'Node 1-2' }, { id: 13, label: 'Node 1-3' } ] }, { id: 2, label: 'Node 2', children: [ { id: 21, label: 'Node 2-1' }, { id: 22, label: 'Node 2-2' }, { id: 23, label: 'Node 2-3' }, { id: 24, label: 'Node 2-4' } ] } ], defaultProps: { children: 'children', label: 'label' } } } } </script> <style> .horizontal-scroll { overflow-x: auto; } .el-tree { width: 800px; /* 根据实际需求设置宽度 */ } .el-tree-node { width: 200px; /* 根据实际需求设置宽度 */ } .custom-node { display: inline-block; /* 让节点内容横向排列 */ } </style> ``` 在上面的例子中，我们给树形选择器添加了一个 `horizontal-scroll` 类名，并为其设置了 `overflow-x: auto` 属性。然后，我们为树形选择器和树形选择器节点设置固定宽度，并为节点设置了合适的宽度，以保证节点在不同层级之间的对齐。最后，我们使用 `display: inline-block` 让节点内容横向排列。这样就能够在树形选择器超出容器宽度时触发横向滚动条的显示了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值