Vue单页面实现el-tree el-breadcrumb功能、el-tree右键点击树节点展示菜单功能、树节点编辑节点字段名称功能

(1) 点击el-tree节点 使用el-breadcrumb展示选中树节点及父项数据

        重点：handleNodeClick方法、getTreeNode方法

(2) 选择el-breadcrumb-item设置el-tree节点选中 

         必须设置属性: current-node-key="currentNodeKey"  、 node-key="id"

         重点: 设置树节点渲染 this.$refs.tree.setCurrentKey(item.id) 

(3) 右键点击树节点展示菜单 

        重点：handleNodeContextmenu方法、showTreeMenu方法、设置active样式  

 (4) 树节点编辑节点字段名称

         重点：handleTreeNodeNameEdit方法、submitTreeNodeNameEdit方法

<template><div class="sqm-file-page"><el-row><el-col :span="4"><div class="grid-left-content"><el-tree ref="tree" :data="treeData" :props="defaultProps" node-key="id" highlight-current :default-expanded-keys="defaultExpandedKeys" :current-node-key="currentNodeKey" :expand-on-click-node="false" @node-click="handleNodeClick" @node-contextmenu="handleNodeContextmenu"><template #default="{ node, data }"><!-- 如果是编辑状态 --><template v-if="data.isEdit == 1"><el-input ref="treeNodeNameInput" v-model="treeNodeName" class="name-input" @blur="() => submitTreeNodeNameEdit(node, data)" /></template><!-- 如果不是编辑状态 --><span v-else v-text="data.name" /><i class='el-icon-edit-outline' @click.stop="() => handleTreeNodeNameEdit(node, data)" />          </template></el-tree><div ref="treeMenu" class="tree-menu">树节点右键菜单内容</div></div></el-col><el-col :span="20"><div class="grid-right-content"><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item v-for="(item, index) in breadList" :key="index" @click.native="handleBreadcrumbItem(item, index)">{{ item.name }}</el-breadcrumb-item></el-breadcrumb></div></el-col></el-row></div>
</template><script>
import {findTree} from '@/api/sqm//qf/api'export default {name: 'SqmFileList',data() {return {treeData: [],defaultExpandedKeys: [1],currentNodeKey: '',defaultProps: {children: 'sqmFileList',label: 'name'},activeNode: {}, // 选中的节点      breadList: [], // 面包屑数组treeNodeName: '' // 树节点编辑时名称}},created() {const that = thisthat.getTree()},methods: {// el-tree数据getTree() {const that = thisfindTree().then(res => {let expandedKeys = []for (let i = 0; i < res.data.length; i++) {expandedKeys.push(res.data[i].id)}that.defaultExpandedKeys = expandedKeysthat.treeData = res.datathat.breadList = res.data     })},// 树节点点击handleNodeClick(data, node) {const that = this// 设置树节点选中this.$set(data, 'isChecked', true) // 获取面包屑this.breadList = []this.getTreeNode(this.$refs.tree.getNode(data.id))that.activeNode = data},// 获取当前树节点和其父级节点getTreeNode(node) {if (node && node.data.name) {this.breadList.unshift(node.data)this.getTreeNode(node.parent) // 递归}},// 点击面包屑handleBreadcrumbItem(item, index) {// 设置树节点当前选中的keythis.currentNodeKey = item.id// 重点: 设置树节点渲染this.$refs.tree.setCurrentKey(item.id)// 删除选中面包屑后面的面包屑this.breadList.splice(index + 1, this.breadList.length)},// 树节点鼠标右键点击handleNodeContextmenu(e, data, node, target) {// 树节点选中之后才能展示树节点菜单if (data.isChecked) {this.showTreeMenu(e, data, node, target)}},// 展示树节点菜单showTreeMenu(e, data, node, target) {const menu = this.$refs.treeMenuconst menuHeight = menu.clientHeightconsole.log(menuHeight)const x = e.pageX // 触发点到页面窗口左边的距离const y = e.pageY // 触发点到页面窗口顶部的距离if ((document.body.clientHeight - y) >= menuHeight) {menu.style.top = y + 'px'menu.style.bottom = 'auto'} else {menu.style.top = 'auto'menu.style.bottom = document.body.clientHeight - y + 'px'}menu.style.left = x + 'px'menu.classList.add('active')console.log(menu)},// 树节点编辑handleTreeNodeNameEdit(node, data) {this.$set(data, 'isEdit', 1)this.treeNodeName = data.namethis.$nextTick(() => {this.$refs.treeNodeNameInput.focus()})},// 树节点编辑后输入框失焦提交submitTreeNodeNameEdit(node, data) {if (data.name == this.treeNodeName) {console.log('没有修改')this.treeNodeName = ''this.$set(data, 'isEdit', 0)} else {this.$set(data, 'name', this.treeNodeName)this.treeNodeName = ''this.$set(data, 'isEdit', 0)// 此处...编辑完成后调用接口}},}}
</script><style lang="less" scoped>
.sqm-file-page {.grid-left-content {margin-right: 10px;::v-deep.el-tree-node {position: relative;font-size: 14px;// 设置选中节点样式&.is-current>.el-tree-node__content {background-color: #1456F01A;color: #1456F0;}.custom-tree-node {width: 100%;align-items: center;justify-content: space-between;i {padding-right: 20px;}.el-icon-edit-outline {position: absolute;right: 20px;top: 5px;}div.name-input {.el-input__inner {width: 55%;height: 21px;}}}}// 树节点右键菜单样式.tree-menu {position: fixed;width: 130px;border: 1px solid #DEDEDF;border-radius: 6px;background-color: #ffffff;box-shadow: 0 6px 24px #F4F5F5;visibility: hidden;}.active {visibility: visible;z-index: 2;}}.grid-right-content {::v-deep.el-breadcrumb {padding: 40px 0 20px 0;.el-breadcrumb__item {cursor: pointer;.el-breadcrumb__inner {font-size: 16px;color: #646A73;}&:last-child {.el-breadcrumb__inner {color: #1F2329;}}}}}
}
</style>

代码仅供参考 具体实现根据具体实际情况!