vue+element树形控件-右击增删改查以及节点的拖拽。

element组件的官方文档：https://element.eleme.io/#/zh-CN/component/tree

完整代码在最下方。

1.做一个右键点击弹出的div，可供增删改并分别注册点击事件：

<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>

2.树形控件页面拉到最下面：阅读Events表格

<el-tree

  :data="treeData"

  node-key="id"

  default-expand-all  // 默认展开所有节点

  @node-contextmenu="rightClick"

ref="tree">

首先我们给这棵树注册右击事件，弹出可以选择增删改的div，同时将点击的节点保存起来。

第一层节点包含：同级添加、子级添加、删除节点、修改节点

其余叶子节点包含：子级添加、删除节点、修改节点


在标签中添加： @node-contextmenu="rightClick" ，该事件包含4个参数，如图所示：

rightClick (MouseEvent, object, Node, element) { // event、object该节点所对应的对象、节点对应的 Node、节点组件本身

this.currentData = object  // 定义变量接收该节点所对应的对象

this.currentNode = Node // 定义变量接收该节点对应的 Node

if (Node.level ===1) { // 判断节点是否为第一层节点  

this.firstLevel =true // 是的话显示同级添加选项

  }else {

this.firstLevel =false // 否则视为叶子节点不添加同级选项

  }

this.menuVisible =true //显示增删改的div

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' // 以上两句话将菜单显示在鼠标点击旁边定位

},

foo () {

this.menuVisible =false 

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

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

},

3.点击-同级添加


addSameLevelNode () {

let id =Math.ceil(Math.random() *100)  //随机产生id(至于id很小概率重复的问题，我没解决。)

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

this.$refs.tree.append(data,this.currentNode.parent) // 同级添加的parent,就是当前的点击的parent

},

4.点击-子级添加

addChildNode () {

console.log(this.currentData)

console.log(this.currentNode)

if (this.currentNode.level >=3) {   // 判断当前节点的level，若是第三层，弹出提示

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

return false

  }

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

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

this.$refs.tree.append(data,this.currentNode) // 这边和同级添加类似哒

},

5.点击-删除节点


deleteNode () { // 这个我之所以没有传data ，是因刚刚右击的节点数据我都保存到变量中了

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

},

6.点击-修改节点名

我做的效果如图：先在<el-tree>标签添加

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

    <span v-show="!data.isEdit">  // 这个isEdit是我数据中就有的，默认都是false。isEdit是false取反是true是span标签显示,反之隐藏。（但是我添加节点没有这个属性不知道为啥可以编辑。。。当然前面可以自己 加个isEdit:false试试哈）

        // 这个:class我没用到可以去掉

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

    </span>

    <span v-show="data.isEdit"> // isEdit是true,上面span标签隐藏，input标签显示，呈现编辑的状态

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

              v-model="data.label" // input标签内容保存在data.label上，从而改变数据

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

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

                @keydown.native.enter="NodeBlur(node,data)"> // 失去焦点或enter键表明编辑结束触发的事件

        </el-input>

    </span>

</span>

调用的函数

NodeBlur (Node, data) {

    console.log(Node, data）

    if (data.isEdit) {

    this.$set(data,'isEdit',false)  // 先把isEdit置为false

    console.log(data.isEdit)

    this.$nextTick(() => { //  这个我不太懂，后续查查。。。

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

    })

    }

},

7.查找-我是做的所有节点查找

<el-input

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

  v-model="filterText" // 这个记得在data中定义

class="search">

</el-input>

// 函数

filterNode (value, data) {

    if (!value)return true

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

    },

watch: { 

     filterText (val) { 

         this.$refs.tree.filter(val) 

        }

},

8.节点的拖拽


根据上图，我们给el-tree注册这些事件：

<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">

对应的事件：

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)

},

9.完整代码

<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>


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,491评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,856评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,745评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,196评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,073评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,112评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,531评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,215评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,485评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,215评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,583评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2赞 335