树结构高亮显示样式修改

@@ -101,3 +101,15 @@ input:-webkit-autofill {
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
+.tree-div .el-tree-node.is-current>.el-tree-node__content{
+  color:#fff;
+  background-color: #1e9fff;
+}
+.tree-div .el-tree-node__content:hover{
+  color:#fff;
+  background-color: #1e9fff;
+}
+.el-tabs__item.is-active{
+  background-color: #1e9fff;
+  color: #ffffff;
+}

 <template>
   <div :style="styleObj" class="treeContainer">
     <div class="tree-left" :style="treeLeftStyle">
-      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="optionsSetup.isType" stretch>
+      <el-tabs v-model="activeName" class="demo-tabs" type="card"  @tab-click="handleClick" v-if="optionsSetup.isType" stretch>
         <el-tab-pane label="业务系统" name="bos"></el-tab-pane>
         <el-tab-pane label="资源类型" name="res"></el-tab-pane>
       </el-tabs>
       <el-tree :style="textStyle" class="tree-div" ref="roleTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
                node-key="id"  :default-checked-keys="checkedKeys"
-      />
+      >
+        <el-tooltip :disabled ="showTitle"   effect="dark" :content="tooltipTitle" placement="top"  slot-scope="{ node, data }" >
+          <span class="span-ellipsis"  @mouseover="onShowNameTipsMouseenter">{{node.label}}</span>
+        </el-tooltip>
+      </el-tree>
     </div>
     <div class="tree-content" v-if="optionsSetup.isFrame">
         <iframe :src="iframeSrc" style="width:100%;height:100%;" frameborder="0"></iframe>
@@ -25,6 +29,8 @@ export default {
   },
   data() {
     return {
+      showTitle:false,//提示
+      tooltipTitle:'',//提示文本
       iframeSrc:'',
       activeName:'bos',
 /*      defaultProps : {
@@ -117,6 +123,17 @@ export default {
 
   },
   methods: {
+    onShowNameTipsMouseenter(e) {
+      var target = e.target;
+      let textLength = target.clientWidth;
+      let containerLength = target.scrollWidth;
+      if (textLength < containerLength) {
+        this.tooltipTitle = e.target.innerText;
+        this.showTitle = false;
+      } else {
+        this.showTitle = true;
+      }
+    },
     handleClick(tab,event){
       //切换类型获取树结构数据
       if (this.optionsData.dataType == "dynamicData" && this.optionsSetup.isType) {
@@ -301,5 +318,13 @@ export default {
   width:50%!important;
   margin:0 auto!important;
 }
+.span-ellipsis {
+  width: 100%;
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-right: 20px;
+}
 
 </style>