elementui树形组件右键自定义增删节点与自定义修改前面icon

之前网上荡了一遍，并没有找到什么好例子，索性自己写个吧。。

代码在github上，https://github.com/chengheai/element-tree 欢迎star，follow，谢谢！

个人博客 ：https://chengheai.github.io/ 欢迎交流

其实很简单的了，还是把代码分享一下吧；

template

<el-aside style="padding-top:10px">
          <el-tree
            :data="setTree"
            :props="defaultProps"
            node-key="id"
            ref="SlotMenuList"
            :filter-node-method="filterNode"
            @node-contextmenu='rihgtClick'
            accordion
            >
            <span class="slot-t-node" slot-scope="{ node, data }">
              <span v-show="!node.isEdit">
                <span v-show="data.children && data.children.length >= 1">
                  <i :class="{ 'fa fa-plus-square': !node.expanded, 'fa fa-minus-square':node.expanded}" />
                  <span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']">{{node.label}}</span>
                </span>
                <span v-show="!data.children || data.children.length == 0">
                  <i class='' style='margin-right:10px'></i>
                  <span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']">{{node.label}}</span>
                </span>
              </span>
            <!-- 编辑输入框 -->
              <span v-show="node.isEdit">
                <el-input class="slot-t-input" size="mini" autofocus
                  v-model="data.name"
                  :ref="'slotTreeInput'+data.id"
                  @blur.stop="NodeBlur(node, data)"
                  @keyup.enter.native="NodeBlur(node, data)"></el-input>
              </span>
            </span>
          </el-tree>
          <!--鼠标右键点击出现页面-->
          <div v-show="menuVisible">
            <el-menu
              id = "rightClickMenu"
              class="el-menu-vertical"
              @select="handleRightSelect"
              active-text-color="#fff"
              text-color="#fff">
              <el-menu-item index="1" class="menuItem">
                <span slot="title">添加分类</span>
              </el-menu-item>
              <el-menu-item index="2" class="menuItem">
                <span slot="title">修改分类</span>
              </el-menu-item>
              <el-menu-item index="3" class="menuItem">
                <span slot="title">删除分类</span>
              </el-menu-item>
              <hr style="color: #ffffff">
              <el-menu-item index="4" class="menuItem">
                <span slot="title">添加标签</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-aside>

script

handleRightSelect1(key) {
      console.log(key);
      if (key == 1) {
        this.NodeAdd(this.NODE, this.DATA);
        this.menuVisible2 = false;
      } else if (key == 2) {
        this.NodeEdit(this.NODE, this.DATA);
        this.menuVisible2 = false;
      } else if (key == 3) {
        this.NodeDel(this.NODE, this.DATA);
        this.menuVisible2 = false;
      } else if(key == 4){
        console.log('4')
      }
    },
		// handleAddTop(){//添加顶级节点
		// 	this.setTree.push({
		// 		id: ++this.maxexpandId,
		// 		name: '新增顶级节点',
		// 		pid: '',
		// 		children: []
		// 	})
		// },
		NodeBlur(n, d){//输入框失焦
			console.log(n, d)
			if(n.isEdit){
				this.$set(n, 'isEdit', false)
			}
			this.$nextTick(() => {
				this.$refs['slotTreeInput'+d.id].$refs.input.focus()
			})
		},
		NodeEdit(n, d){//编辑节点
			console.log(n, d)
			if(!n.isEdit){//检测isEdit是否存在or是否为false
				this.$set(n, 'isEdit', true)
			}
		},
		NodeDel(n, d){//删除节点
			console.log(n, d)
			let that = this;
			if(d.children && d.children.length !== 0){
				this.$message.error("此节点有子级，不可删除！")
				return false;
			}else{
				//新增节点可直接删除，已存在的节点要二次确认
				//删除操作
				let DelFun = () => {
					let _list = n.parent.data.children || n.parent.data;//节点同级数据
					let _index = _list.map((c) => c.id).indexOf(d.id);
					console.log(_index)
					_list.splice(_index, 1);
					this.$message.success("删除成功！")
				}
				//二次确认
				let ConfirmFun = () => {
					this.$confirm("是否删除此节点？","提示",{
						confirmButtonText: "确认",
						cancelButtonText: "取消",
						type: "warning"
					}).then(() => {
						DelFun()
					}).catch(() => {})
				}
				//判断是否是新增节点
				d.id > this.non_maxexpandId ? DelFun() : ConfirmFun()
			}
		},
		NodeAdd(n, d){//新增节点
			console.log(n, d)
			//判断层级
			if(n.level >= 3){
				this.$message.error("最多只支持三级！")
				return false;
			}
			//新增数据
			d.children.push({
				id: ++this.maxexpandId,
				name: '新增节点',
				pid: d.id,
				children: []
			})
			//同时展开节点
			if(!n.expanded){
				n.expanded = true
			}
		},
    rihgtClick(event, object, value, element) {
      if (this.objectID !== object.id) {
        this.objectID = object.id;
        this.menuVisible = true;
        this.DATA = object;
        this.NODE = value;
      } else {
        this.menuVisible = !this.menuVisible;
      }
      document.addEventListener('click',(e)=>{
        this.menuVisible = false;
      })
      let menu = document.querySelector("#rightClickMenu");
      /* 菜单定位基于鼠标点击位置 */
      menu.style.left = event.clientX + 20 + "px";
      menu.style.top = event.clientY - 30 + "px";
      menu.style.position = "absolute"; // 为新创建的DIV指定绝对定位
      menu.style.width = 160 + "px";
      /*console.log("右键被点击的左侧:",menu.style.left);
        console.log("右键被点击的顶部:",menu.style.top);*/
      //        console.log("右键被点击的event:",event);
      // console.log("右键被点击的object:", object);
      // console.log("右键被点击的value:", value);
      // console.log("右键被点击的element:", element);
    },

完整代码请转到https://github.com/chengheai/element-tree