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方法

javascript 复制代码

<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 = this
    that.getTree()
  },
  methods: {
    // el-tree数据
    getTree() {
      const that = this
      findTree().then(res => {
        let expandedKeys = []
        for (let i = 0; i < res.data.length; i++) {
          expandedKeys.push(res.data[i].id)
        }
        that.defaultExpandedKeys = expandedKeys
        that.treeData = res.data
        that.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) {
      // 设置树节点当前选中的key
      this.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.treeMenu
      const menuHeight = menu.clientHeight
      console.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.name
      this.$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>

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