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;
  }