fix: DetailList empty item height no-out #109

src/components/tools/DetailList.vue

@@ -25,6 +25,7 @@ const Item = {
     }
   },
   render () {
+    console.log('this.$slots.default', this.$slots.default)
     return (
       <Col {...{ props: responsive[this.col] }}>
         <div class="term">{this.$props.term}</div>
@@ -77,7 +78,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 
   .detail-list {
 
@@ -88,7 +89,7 @@ export default {
       margin-bottom: 16px;
     }
 
-    .term {
+    /deep/ .term {
       color: rgba(0,0,0,.85);
       display: table-cell;
       line-height: 20px;
@@ -96,7 +97,7 @@ export default {
       padding-bottom: 16px;
       white-space: nowrap;
 
-      &:after {
+      &:not(:empty):after {
         content: ":";
         margin: 0 8px 0 2px;
         position: relative;
@@ -104,12 +105,18 @@ export default {
       }
     }
 
-    .content {
+    /deep/ .content {
       color: rgba(0,0,0,.65);
       display: table-cell;
+      min-height: 22px;
       line-height: 22px;
       padding-bottom: 16px;
       width: 100%;
+      &:empty {
+        content: ' ';
+        height: 38px;
+        padding-bottom: 16px;
+      }
     }
 
     &.small {
@@ -120,13 +127,13 @@ export default {
         font-weight: normal;
         margin-bottom: 12px;
       }
-      .term, .content {
+      /deep/ .term, .content {
         padding-bottom: 8px;
       }
     }
 
     &.large {
-      .term, .content {
+      /deep/ .term, .content {
         padding-bottom: 16px;
       }
 
@@ -139,7 +146,7 @@ export default {
       .term {
         padding-bottom: 8px;
       }
-      .term, .content {
+      /deep/ .term, .content {
         display: block;
       }
     }

src/views/profile/advanced/Advanced.vue

@@ -53,10 +53,10 @@
       <detail-list title="信息组">
         <detail-list-item term="某某数据">725</detail-list-item>
         <detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
-        <detail-list-item >&nbsp;</detail-list-item>
+        <detail-list-item ></detail-list-item>
         <detail-list-item term="某某数据">725</detail-list-item>
         <detail-list-item term="该数据更新时间">2018-08-08</detail-list-item>
-        <detail-list-item >&nbsp;</detail-list-item>
+        <detail-list-item ></detail-list-item>
       </detail-list>
       <a-card type="inner" title="多层信息组">
         <detail-list title="组名称" size="small">