vue element tree+popover气泡 节点操作（增删改查上下移）

在项目上需到一个小需求element树的节点操作按钮比较多的情况，该如何处理？下图是后面给的需求：

我这里使用的引入cdn去使用的vue+element,脚手架的小伙伴，代码拷过去一样可以用，话不多说上干货！！！！！！！

 

html:

<div class="leftTree" id="leftTree">
	<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
		<div class="comp-tr-node" slot-scope="{ node, data }">
			<span>{{ node.label }}</span>
			<el-popover placement="right" width="110" trigger="hover">
				<div class="qpdiv">
					<div>
						<el-button type="text">编辑</el-button>
					</div>
					<div>
						<el-button type="text">删除</el-button>
					</div>
					<div>
						<el-button type="text">添加节点</el-button>
					</div>
					<div>
						<el-button type="text">上移</el-button>
					</div>
					<div>
						<el-button type="text">下移</el-button>
					</div>
				</div>
				<i class="el-icon-more nodeIcon" slot="reference" title="点击出现菜 
                单"></i>
			</el-popover>
		</div>

	</el-tree>
</div>

 

js:

<script type="text/javascript">
		let vm = new Vue({
			el: "#leftTree",
			data() {
				return {
					data: [{
						label: '一级 1',
						visible: false,
						children: [{
							label: '二级 1-1',
							visible: false,
							children: [{
								label: '三级 1-1-1',
								visible: false,
							}]
						}]
					}, {
						label: '一级 2',
						visible: false,
						children: [{
							label: '二级 2-1',
							visible: false,
							children: [{
								label: '三级 2-1-1',
								visible: false
							}]
						}, {
							label: '二级 2-2',
							visible: false,
							children: [{
								label: '三级 2-2-1',
								visible: false
							}]
						}]
					}, {
						label: '一级 3',
						visible: false,
						children: [{
							label: '二级 3-1',
							visible: false,
							children: [{
								label: '三级 3-1-1',
								visible: false
							}]
						}, {
							label: '二级 3-2',
							visible: false,
							children: [{
								label: '三级 3-2-1',
								visible: false
							}]
						}]
					}],
					defaultProps: {
						children: 'children',
						label: 'label'
					}
				};
			},
			methods: {
				handleNodeClick(data) {
					console.log(data);
				}
			}
		})
	</script>

css:

        *{
			padding:0;
			margin:0;
		}
		body,html{
			width:100%;
			height: 100%;
		}
		#leftTree{
			width:260px;
			height:100%;
			box-shadow: 2px 0 5px 5px #ccc;
		}
		.leftTree .el-tree-node__content{
			position:relative;
		}
		/* .leftTree .el-tree-node__content:hover .nodeIcon{
			display: block;
		} */
		.nodeIcon{
			/* display: none; */
			position: absolute;
			transform: rotate(90deg);
			top: 23%;
			right: 10px;
			color: #3789FF;
			vertical-align: top;
		}

 

以上就是全部代码希望能帮到小伙伴们！！！！！