今天实现的是,树形控件右键点击会出现操作菜单,增加、修改、删除按钮会弹出相应的操作弹窗。
根据ant design vue 的右键点击事件 rightClick 来控制菜单的显示和隐藏就简单了
效果如下:(样式还没写,所以比较简单)
代码如下
//树结构
<a-directory-tree
:tree-data="filetreeData"
@rightClick="onRightClick"
>
</a-directory-tree>
//功能菜单
<div :style="this.tmpStyle" v-if="this.NodeTreeItem">
<a-button type="primary" title="添加" icon="plus" size="small" @click="orgAdd " />
<a-button type="primary" title="编辑" icon="edit" size="small" @click="orgEdit " />
<a-button type="primary" title="删除" icon="delete" size="small" @click="orgDelete " />
</div>
//右键点击事件
onRightClick ({event, node}) {
const x = event.currentTarget.offsetLeft + event.currentTarget.clientWidth;
const y = event.currentTarget.offsetTop;
this.NodeTreeItem = {
pageX: x,
pageY: y,
id: node._props.eventKey,
title: node._props.title,
parentOrgId: node._props.dataRef.key || null
};
this.tmpStyle = {
position: 'absolute',
maxHeight: 40,
textAlign: 'center',
left: `${x + 10 - 0}px`,
top: `${y + 4 - 0}px`,
display: 'flex',
flexDirection: 'row'
};
},
// 用于点击空白处隐藏增删改菜单
clearMenu () {
this.NodeTreeItem = null;
},
orgAdd(){},
orgEdit(){},
orgDelete(){}