iview的tree节点点击右键添加下拉操作菜单
iview的tree节点点击右键添加下拉操作菜单最终效果图代码import $ from 'jquery/dist/jquery'export default {data() {return {kindData: [{...
·
iview的tree节点点击右键添加下拉操作菜单
最终效果图
代码
<template>
<Tree :data="kindData" :render="renderContent"></Tree>
</template>
<script>
import $ from 'jquery/dist/jquery'
export default {
data() {
return {
kindData: [
{
"expand": true,
"title": "标题一",
"id": null,
"code": "01",
"parentCode": "0",
"children": [
{
"tr_parentCode": "01",
"tr_userid": null,
"tr_name": "11",
"count": "0",
"tr_code": "0101",
"tr_count": 15,
"title": "子节点1",
"id": null,
"code": "0101",
"parentCode": "01",
"nodeKey": 1
}
],
"nodeKey": 0
},
{
"expand": true,
"title": "标题二",
"id": null,
"code": "02",
"parentCode": "0",
"children": [
{
"tr_parentCode": "02",
"tr_userid": null,
"tr_name": "子节点1",
"count": "0",
"tr_code": "0202",
"tr_count": 0,
"title": "子节点1",
"id": null,
"code": "0202",
"parentCode": "02",
"nodeKey": 3
},
{
"tr_parentCode": "02",
"tr_userid": null,
"tr_name": "子节点2",
"count": "0",
"tr_code": "0203",
"tr_count": 0,
"title": "子节点2",
"id": null,
"code": "0203",
"parentCode": "02",
"nodeKey": 4
}
],
"nodeKey": 2
},
{
"expand": true,
"title": "4",
"id": null,
"code": "07",
"parentCode": "0",
"children": [
{
"tr_parentCode": "07",
"tr_userid": null,
"tr_name": "41",
"count": "0",
"tr_code": "0700",
"tr_count": 23,
"title": "41",
"id": null,
"code": "0700",
"parentCode": "07",
"nodeKey": 49
}
],
"nodeKey": 48
},
{
"expand": true,
"title": "88888",
"id": "1377",
"code": "48f84f52884845b999bcf4f3d5978a39",
"parentCode": "0",
"children": [],
"nodeKey": 55
}
]
}
},
methods: {
renderContent(h, {root, node, data}) {
return h('span', {
class: 'myMenu',
domProps: {
id: data.code
},
style: {
display: 'inline-block',
width: '100%'
},
on: {
click: ($event) => {
$event.stopPropagation();
}
}
}, [
h('span', [
h('Icon', {
props: {
type: (data.children && data.children.length > 0) ? 'ios-folder-open' : ''
},
style: {
marginRight: '8px',
marginTop: '-3px',
color: '#FECB61',
fontSize: '18px'
}
}),
//开始
h('Dropdown',
{
props: {transfer: true, trigger: 'contextMenu', placement: 'bottom'},
nativeOn: {
mousedown: ($event) => {
$event.stopPropagation();
if ($event.button === 2) {//$event.button === 0鼠标左键 $event.button === 2鼠标右键 $event.button === 1鼠标滚轮
//引入jquery 连续点击右键出下拉菜单,将上一个下拉菜单隐藏
var dropdownMenuId = "dropdown" + $($event.target).attr("id").substring(5);
$("#" + dropdownMenuId).css("display", "block");
$("#" + dropdownMenuId).parent(".ivu-select-dropdown").siblings(".ivu-select-dropdown").children(".ivu-dropdown-menu").css("display", "none");
}
}
}
},
[
h('a',
{
style: {
color: '#333'
},
domProps: {
id: "title" + data.code
}
}, data.title),
h('DropdownMenu',
{
slot: 'list',
style: {
display: "block"
},
domProps: {
id: "dropdown" + data.code
}
},
[
h('DropdownItem', {
style: {
fontSize: '14px !important',
color: '#333',
textAlign: 'center',
display: data.children ? 'block' : 'none'
},
nativeOn: {
click: ($event) => {
$event.stopPropagation();
}
}
}, '添加同级目录'),
h('DropdownItem', {
style: {
fontSize: '14px !important',
color: '#1081CE',
textAlign: 'center'
},
nativeOn: {
click: ($event) => {
$event.stopPropagation();
}
}
}, '添加子节点'),
h('DropdownItem', {
style: {
fontSize: '14px !important',
color: '#19BE6B',
textAlign: 'center'
},
nativeOn: {
click: ($event) => {
$event.stopPropagation();
}
}
}, '修改'),
h('DropdownItem', {
style: {
fontSize: '14px !important',
color: '#FF0000',
textAlign: 'center'
},
nativeOn: {
click: ($event) => {
$event.stopPropagation();
}
}
}, '删除')
]
)
])
//结束
])
]);
}
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)