数字水利

src/views/leader.vue

@@ -80,9 +80,14 @@
                     <template slot="title">
                       <div class="d-l-con sj-collapse" @click="getWaterRecord(item.id, item.reiverLengthId)">
                         <div class="d-l-l-text">
-                          <h4 class="collapse-title">{{ item.name }}</h4>
+                          <el-tooltip class="item" effect="dark" placement="left" style="width:10rem ;" :disabled="(item.name.length <= 20)">
+                            <div slot="content">
+                              <h4 class="collapse-title" style="width: 200px;">{{ item.name}}</h4>
+                            </div>
+                            <h4 class="collapse-title" style="width: 100px;">{{ item.name | ellipsis20}}</h4>
+                          </el-tooltip>
                         </div>
-                        <div class="d-l-l-count">({{ item.recordCount }}-{{ item.planCount }})</div>
+                        <div class="d-l-l-count">({{ item.recordCount }}/{{ item.planCount }})</div>
                       </div>
                     </template>
                     <div class="d-l-con this-child sj-collapse" @click="getWaterPoint(child.id)" v-for="(child,index) in recordList" >
@@ -457,8 +462,18 @@ export default {
         }]
       })
     }
-  }
-
+  },
+  //过滤器
+  filters: {
+    //标题截取前20
+    ellipsis20(value) {
+      if (!value) return '';
+      if (value.length > 20) {
+        return value.slice(0, 20) + '...'
+      }
+      return value
+    }
+  },
 }
 </script>