之前網上蕩了一遍，並沒有找到什麼好例子，索性自己寫個吧。。

其實很簡單的了，還是把程式碼分享一下吧；

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);
    },