el-tree增加滚动条和Tooltip提示

深藏阁楼爱情的钟 2022-10-17 04:19 400阅读 0赞

树形结构，有些子节点名称较长，为了显示完全，现在有两种解决办法

### 1.增加滚动条，并控制鼠标移入时的显隐。 ###

.down-tree {
      overflow: auto;
      max-height: 790px;
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 10px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        background-color: rgb(255, 255, 255);
    
        border-radius: 5px;
      }
      &::-webkit-scrollbar-track {
        background-color: rgb(255, 255, 255);
    
        box-shadow: inset 0 0 3px rgb(255, 255, 255);
    
        border-radius: 5px;
      }
      &::-webkit-scrollbar-button {
        background-color: rgb(255, 255, 255);
    
        display: none;
      }
    
      &:hover {
        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          background-color: rgba(0, 0, 0, 0.2);
    
          border-radius: 5px;
        }
        &::-webkit-scrollbar-track {
          background-color: #f5f5f5;
    
          box-shadow: inset 0 0 3px rgba(253, 249, 249, 0.1);
    
          border-radius: 5px;
        }
        &::-webkit-scrollbar-button {
          background-color: #eee;
    
          display: none;
        }
      }
    }
    .el-tree {
      min-width: 100%;
      display: inline-block;
    }

### 2.增加Tootlip提示 ###

<div class="down-tree">
         <el-tree ref="treeData" :data="treeData" :props="defaultProps" :filter-node-method="filterNode" class="filter-tree" ">
          </el-tree>
          <template slot-scope="{node}">
             <el-tooltip effect="dark" :content="node.label" placement="top-start" style="font-size:14px;">
              <span>{
       {node.label}}</span>
              </el-tooltip>
           </template>
      </div>