贴入树的load代码,添加ul是为了鼠标右击展示操作选项的
<div class="block device-tree"> <div v-show="showOpertions"> <ul id="menu" class="right-menu" > <li class="el-icon-plus menu-item" @click="() => add(this.nodes, this.datas)" > 新增 </li> <li class="el-icon-edit menu-item" @click="() => edit(this.nodes, this.datas)" > 编辑 </li> <li class="el-icon-minus menu-item" @click="() => remove(this.nodes, this.datas)" > 删除 </li> </ul> </div> <el-input v-model="filterText" class="hbaseInputClass" placeholder="输入关键字进行过滤" > </el-input> <el-tree v-if="openPanel" ref="tree" class="filter-tree" :props="defaultProps" node-key="path" :default-expanded-keys="treeExpandData" :load="loadData" lazy :data="data" :filter-node-method="filterNode" @node-contextmenu="rightClick" @node-click="handleNodeClick" > <span slot-scope="{ node, data}" class="custom-tree-node"> <!-- 不同节点类型展示logo不同--> <span v-if="data.flag === 'namespace'" class="el-icon-folder-opened">{{ node.label }}</span> <span v-if="data.flag === 'table'" class="el-icon-folder-opened">{{ node.label }}</span> <span v-if="data.flag === 'family'" class="el-icon-folder-opened">{{ node.label }}</span> </span> </el-tree> </div>
// 获取树形结构默认展开节点,获取到树的数据后,就调这个接口,传入node-key绑定的需要展开的节点的path值 getRoleTreeRootNode(provincialCenterPath) { this.treeExpandData.push(provincialCenterPath) },
rightClick(event, data, node, obj) { this.showOpertions = false // 先把模态框关死,目的是:第二次或者第n次右键鼠标的时候 它默认的是true this.showOpertions = true const menu = document.querySelector('#menu') menu.style.left = event.clientX - 220 + 'px' menu.style.top = event.clientY - 85 + 'px' // 给整个document添加监听鼠标事件,点击任何位置执行closeRightMenu方法,及时将菜单关闭 document.addEventListener('click', this.closeRightMenu) }, closeRightMenu() { this.showOpertions = false // 及时关掉鼠标监听事件 document.removeEventListener('click', this.closeRightMenu) },
loadData(node, resolve) { this.$nextTick(() => { if (node.level === 0) { resolve(this.data) } if (node.level >= 1) { this.getIndex(node, resolve) } }) }, getIndex(node, resolve) { this.$get('***/**/***/**', { 'path': this.folderPath }).then(data => { const array = [] for (let i = 0; i < data.length; i++) { const jsonList = {} jsonList.name = data[i].name jsonList.path = data[i].path if (data[i].fileFlag === false) { jsonList.leaf = false } else { jsonList.leaf = true } array.push(jsonList) } return resolve(array) }).catch(data => { }) },
鼠标右键弹出操作栏的样式设置:
1 .right-menu { 2 z-index: 1; 3 position: absolute; 4 height: 100px; 5 width: 100px; 6 position: absolute; 7 border-radius: 5px; 8 border: 1px solid #ccc; 9 background-color: white; 10 } 11 .menu-item { 12 display: block; 13 line-height: 20px; 14 text-align: left; 15 margin-top: 10px; 16 font-size: 14px; 17 color: #606266; 18 } 19 li:hover { 20 background-color: #edf6ff; 21 color: #606266; 22 }