el-tree,很恶心的树，就从默认展开节点开始吧

贴入树的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 => {
      })
    },

 

鼠标右键弹出操作栏的样式设置：

 .right-menu {
    z-index: 1;
    position: absolute;
    height: 100px;
    width: 100px;
    position: absolute;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: white;
  }
  .menu-item {
    display: block;
    line-height: 20px;
    text-align: left;
    margin-top: 10px;
    font-size: 14px;
    color: #606266;
  }
  li:hover {
    background-color: #edf6ff;
    color: #606266;
  }