css

/*树悬浮框: 名字过长则显示...*/
.span-ellipsis {
  width: calc(100% - 4px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: auto;
  padding: 4px 2px;
  border-radius: 4px;
}

应用

<el-tree :data="Datas" :props="defaultProps" :indent="0" :highlight-current="highLight" node-key='id' ref='treeList' default-expand-all >
   <span class="span-ellipsis" slot-scope="{ node, data }">
      <el-tooltip class="item" effect="light" :content="node.label||''" placement="top-start">
            <span >{{ node.label }}</span>
      </el-tooltip>
  </span>
</el-tree>

<el-tree :data="BasicInfo_EquipmentClass_allDatas" :props="defaultProps" :indent="0" :highlight-current="highLight" node-key='id' ref='treeList' default-expand-all @node-click="BasicInfo_EquipmentClass_NodeClick">
           <span class="span-ellipsis" slot-scope="{ node, data }">
              <el-tooltip class="item" effect="light" :content="node.label||''" placement="top-start">
                    <span >{{ node.label }}</span>
              </el-tooltip>
          </span>
        </el-tree>

css样式(虚线)



/*tree*/
.el-tree-node i {
  color:#006F6B;
}

/*树选中颜色*/
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #fff;
}
.el-tree--highlight-current .el-tree-node.is-focusable>.el-tree-node__content {
  background-color: #fff;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content>.el-tree-node__label {
  background-color: #83F8DA;
}
.el-tree-node__label {
  padding: 4px 2px;
  border-radius: 4px;
}
/*树字体*/
.el-tree-node, .el-tree-node__label{
  white-space: nowrap;
  outline: 0;
  font-size: 12px;
  font-family: SimSun;
  font-weight: 400;
  color: #666666;
}
/*树图标*/
/*父节点 闭合*/
.el-tree-node__content>.el-tree-node__expand-icon {
  padding: 6px;
  background: blue;
  background: url('../../assets/img/fold-close.png') no-repeat ;
}
/*父节点 展开*/
.el-tree-node__content>.el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background: red;
  background: url('../../assets/img/fold-open2.png') no-repeat ;
  /*background: url('../../assets/img/fold-open.png') no-repeat ;*/
}
/*叶子图标*/
.el-tree-node__content>.el-tree-node__expand-icon.is-leaf {
  color: transparent;
  cursor: default;
  background: pink;
  background: url('../../assets/img/file.png') no-repeat ;
  padding-left: 8px;
  margin-left: 1px;
}
.el-icon-caret-right:before {
  content: "";
}

/*tree虚线*/

.el-tree-node{
  position: relative;
  padding-left: 15px;
}
.el-tree-node__children{
  padding-left: 10px;
}
.el-tree-node :last-child:before {
  height: 38px;
}
.el-tree>.el-tree-node:before{
  border-left: none;
}
.el-tree>.el-tree-node:after{
  border-top: none;
}
.el-tree-node:before,.el-tree-node:after{
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
.tree :first-child .el-tree-node:before{
  border-left: none;
}
.el-tree-node:before {
  border-left: 1px dashed #B3B3B3;
  bottom: 0px;
  height: 100%;
  top: -20px;
  width: 1px;
}
.el-tree-node:after {
  border-top: 1px dashed #B3B3B3;
  height: 20px;
  top: 17px;
  width: 12px;
}
.el-tree-node__content .is-leaf{
  margin-left: -10px;
}
.el-tree-node :last-child:before {
  height: 30px;
  line-height: 30px;
}


/*树悬浮框时:树选中颜色*/
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #fff;
}
.el-tree--highlight-current .el-tree-node.is-focusable>.el-tree-node__content {
  background-color: #fff;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content>.span-ellipsis {
  background-color: #83F8DA;
}
/*树悬浮框: 名字过长则显示...*/
.span-ellipsis {
  width: calc(100% - 4px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: auto;
  padding: 4px 2px;
  border-radius: 4px;
}

Logo

前往低代码交流专区

更多推荐