点击node节点显示node名称然后点击空白处隐藏这个node名称

78 阅读1分钟
                 <div id="reeDiv">
                      <el-tree
                        :data="data"
                        :props="{ label: 'name' }"
                        @node-click="handleBucketClick"
                      >
                        <span slot-scope="{ node }" class="custom-tree-node">
                          <el-tooltip
                            class="item"
                            effect="dark"
                            :content="node.label"
                            placement="top-start"
                          >
                            <span> {{ node.label | ellipsis(15) }} </span>
                          </el-tooltip>
                          <div></div>
                        </span>
                      </el-tree>

        <span class="nodeName-sty" id="nodeNameId" v-show="showNodeName">{{
                          nodeName
                        }}</span>
                        
                        
              handleBucketClick(v) {
              // node节点名称
              this.nodeName = v.name;
              // 点击node显示节点名称
              this.showNodeName = true;
            },
            
              created() {
                // 点击的时候把nodename隐藏
                document.addEventListener("click", e => {
                
                  let list = document.getElementById("nodeNameId");
                  if (list) {
                    this.showNodeName = false;
                  }
                });
              },