Merge pull request #645 from furybean/table-empty-text

Table: add empty text

packages/table/src/table.vue

@@ -19,6 +19,9 @@
         :row-class-name="rowClassName"
         :style="{ width: layout.bodyWidth ? layout.bodyWidth - (layout.scrollY ? layout.gutterWidth : 0 ) + 'px' : '' }">
       </table-body>
+      <div class="el-table__empty-block" v-if="!data || data.length === 0">
+        <span class="el-table__empty-text">{{ emptyText }}</span>
+      </div>
     </div>
     <div class="el-table__fixed" ref="fixedWrapper"
       :style="{
@@ -123,7 +126,12 @@
 
       rowKey: [String, Function],
 
-      rowClassName: [String, Function]
+      rowClassName: [String, Function],
+
+      emptyText: {
+        type: String,
+        default: '暂无数据'
+      }
     },
 
     components: {

packages/theme-default/src/table.css

@@ -43,6 +43,20 @@
       display: block;
     }
 
+    @e empty-block {
+      display: table;
+      min-height: 60px;
+      text-align: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    @e empty-text {
+      display: table-cell;
+      vertical-align: middle;
+      color: #5e6d82;
+    }
+
     @modifier fit {
       border-right: 0;
       border-bottom: 0;