fix：修复Steps组件动态加载数据issues178

src/packages/steps/demo.vue

@@ -16,6 +16,10 @@
       <nut-step title="待进行" content="这里是该步骤的描述信息"></nut-step>
       <nut-step title="待进行" content="这里是该步骤的描述信息"></nut-step>
     </nut-steps>
+    <h4>动态加载(2s后渲染)</h4>
+    <nut-steps :current="current2" :source="titles">
+      <nut-step :key="index" v-for="(item,index) in titles" :title="item" content="这里是该步骤的描述信息"></nut-step>
+    </nut-steps>
   </div>
 </template>
 
@@ -24,9 +28,17 @@ export default {
   components: {},
   data() {
     return {
-      current: 3
+      current: 3,
+      titles: [],
+      current2: 0
     };
   },
+  mounted() {
+    setTimeout(() => {
+      this.titles = ["已完成", "已完成", "进行中"];
+      this.current2 = 3;
+    }, 2000);
+  },
   methods: {
     next() {
       this.current = this.current + 1;

src/packages/steps/doc.md

@@ -73,19 +73,51 @@
 </nut-steps>
 ```
 
+动态加载(2s后渲染)
+```html
+<nut-steps :current="current2" status="error" :source="titles">
+  <nut-step :key="index" v-for="(item,index) in titles" :title="item" content="这里是该步骤的描述信息"></nut-step>
+</nut-steps>
+```
+
+``` javascript
+export default {
+  components: {},
+  data() {
+    return {
+      current: 3,
+      titles: [],
+      current2: 0
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.titles = ["已完成", "已完成", "进行中"];
+      this.current2 = 3;
+    }, 2000);
+  },
+  methods: {
+    next() {
+      this.current = this.current + 1;
+    }
+  }
+};
+```
+
 
 ## Prop
 
 ### nut-steps
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| current | 当前所在的步骤 | Number | 0
-| status | 流程状态 | String | "process"（可选值 "wait"、"process"、"finish"、"error"）
+| 字段    | 说明                                  | 类型   | 默认值                                                   |
+|---------|---------------------------------------|--------|----------------------------------------------------------|
+| current | 当前所在的步骤                        | Number | 0                                                        |
+| status  | 流程状态                              | String | "process"（可选值 "wait"、"process"、"finish"、"error"） |
+| source  | 异步数据渲染nut-step时，必须绑定对应数组 | Array  | -                                                        |
 
 ### nut-step
   
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| title | 流程步骤的title | String | 步骤
-| content | 流程步骤的content | String | 步骤描述
+| 字段    | 说明              | 类型   | 默认值   |
+|---------|-------------------|--------|----------|
+| title   | 流程步骤的title   | String | 步骤     |
+| content | 流程步骤的content | String | 步骤描述 |

src/packages/steps/steps.vue

@@ -10,6 +10,12 @@ export default {
     current: {
       type: Number
     },
+    source: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
     status: {
       validator(value) {
         return ["wait", "process", "finish", "error"].includes(value);
@@ -50,17 +56,27 @@ export default {
           child.currentStatus += " nut-step-last";
         }
       });
+    },
+    init() {
+      if (this.$slots.default) {
+        this.steps = this.$slots.default
+          .filter(vnode => !!vnode.componentInstance)
+          .map(node => node.componentInstance);
+        this.updateChildProps(true);
+      }
     }
   },
   mounted() {
-    this.steps = this.$slots.default
-      .filter(vnode => !!vnode.componentInstance)
-      .map(node => node.componentInstance);
-    this.updateChildProps(true);
+    this.init();
   },
   watch: {
     current() {
       this.updateChildProps();
+    },
+    source() {
+      this.$nextTick(() => {
+        this.init();
+      });
     }
   }
 };