diff --git a/examples/routers/steps.vue b/examples/routers/steps.vue
index c08a0771..8a1fa0c7 100644
--- a/examples/routers/steps.vue
+++ b/examples/routers/steps.vue
@@ -1,79 +1,87 @@
 <template>
 <div>
-    <Steps :current="1" size="small">
-        <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-    </Steps>
-    <br>
-    <Steps :current="2">
-        <Step title="已完成"></Step>
-        <Step title="进行中"></Step>
-        <Step title="待进行"></Step>
-        <Step title="待进行"></Step>
-    </Steps>
-    <br>
-    <Steps :current="1" size="small">
-        <Step title="已完成"></Step>
-        <Step title="进行中"></Step>
-        <Step title="待进行"></Step>
-        <Step title="待进行"></Step>
-    </Steps>
-    <br>
-    <Steps :current="1" direction="vertical" size="small">
-        <Step title="注册" icon="person-add"></Step>
-        <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="验证邮箱" icon="email"></Step>
-    </Steps>
-    <Steps :current="1" direction="vertical">
-        <Step title="注册" icon="person-add"></Step>
-        <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="验证邮箱" icon="email"></Step>
-    </Steps>
-    <Steps :current="-1" direction="vertical">
-        <Step title="注册" icon="person-add"></Step>
-        <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="验证邮箱" status="finish" icon="email"></Step>
-    </Steps>
-    <br>
-    <p>当前正在进行第 {{ current + 1 }} 步</p>
-    <Steps :current="current">
-        <Step title="步骤1"></Step>
-        <Step title="步骤2"></Step>
-        <Step title="步骤3"></Step>
-        <Step title="步骤4"></Step>
-    </Steps>
-    <br>
-    <i-button type="primary" @click.native="next">下一步</i-button>
-    <br><br><br>
-    <Steps :current="1" direction="vertical" size="small">
-        <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-    </Steps>
-    <br><br>
-    <Steps :current="1" status="error">
-        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
-        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-    </Steps>
-    <Steps direction="vertical" :current="3">
-        <Step title="已完成" content="这里是该步骤的描述信息">
-            <div style="font-size: 16px; color: green">这里是该步骤的描述信息1</div>
-        </Step>
-        <Step title="进行中" content="这里是该步骤的描述信息">
-            <div style="font-size: 24px; color: red">这里是该步骤的描述信息2</div>
-        </Step>
-        <Step title="待进行" content="这里是该步骤的描述信息">
-            <div style="font-size: 46px; color: blue">这里是该步骤的描述信息3</div>
-        </Step>
-        <Step title="待进行" content="这里是该步骤的描述信息">
-            <div style="font-size: 24px; color: green">这里是该步骤的描述信息4</div>
-        </Step>
+    <Steps :current="index">
+        <!--<Step title="开始"></Step>-->
+        <Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index" :content="item.startTime"></Step>
+        <!--<Step title="结束"></Step>-->
     </Steps>
+    <Button @click="change">change</Button>
+    <br><br><br><br>
+    <hr>
+    <!--<Steps :current="1" size="small">-->
+        <!--<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
+        <!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
+        <!--<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
+        <!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
+    <!--</Steps>-->
+    <!--<br>-->
+    <!--<Steps :current="2">-->
+        <!--<Step title="已完成"></Step>-->
+        <!--<Step title="进行中"></Step>-->
+        <!--<Step title="待进行"></Step>-->
+        <!--<Step title="待进行"></Step>-->
+    <!--</Steps>-->
+    <!--<br>-->
+    <!--<Steps :current="1" size="small">-->
+        <!--<Step title="已完成"></Step>-->
+        <!--<Step title="进行中"></Step>-->
+        <!--<Step title="待进行"></Step>-->
+        <!--<Step title="待进行"></Step>-->
+    <!--</Steps>-->
+    <!--<br>-->
+    <!--<Steps :current="1" direction="vertical" size="small">-->
+        <!--<Step title="注册" icon="person-add"></Step>-->
+        <!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
+        <!--<Step title="验证邮箱" icon="email"></Step>-->
+    <!--</Steps>-->
+    <!--<Steps :current="1" direction="vertical">-->
+        <!--<Step title="注册" icon="person-add"></Step>-->
+        <!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
+        <!--<Step title="验证邮箱" icon="email"></Step>-->
+    <!--</Steps>-->
+    <!--<Steps :current="-1" direction="vertical">-->
+        <!--<Step title="注册" icon="person-add"></Step>-->
+        <!--<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
+        <!--<Step title="验证邮箱" status="finish" icon="email"></Step>-->
+    <!--</Steps>-->
+    <!--<br>-->
+    <!--<p>当前正在进行第 {{ current + 1 }} 步</p>-->
+    <!--<Steps :current="current">-->
+        <!--<Step title="步骤1"></Step>-->
+        <!--<Step title="步骤2"></Step>-->
+        <!--<Step title="步骤3"></Step>-->
+        <!--<Step title="步骤4"></Step>-->
+    <!--</Steps>-->
+    <!--<br>-->
+    <!--<i-button type="primary" @click.native="next">下一步</i-button>-->
+    <!--<br><br><br>-->
+    <!--<Steps :current="1" direction="vertical" size="small">-->
+        <!--<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
+        <!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
+        <!--<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>-->
+        <!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
+    <!--</Steps>-->
+    <!--<br><br>-->
+    <!--<Steps :current="1" status="error">-->
+        <!--<Step title="已完成" content="这里是该步骤的描述信息"></Step>-->
+        <!--<Step title="进行中" content="这里是该步骤的描述信息"></Step>-->
+        <!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
+        <!--<Step title="待进行" content="这里是该步骤的描述信息"></Step>-->
+    <!--</Steps>-->
+    <!--<Steps direction="vertical" :current="3">-->
+        <!--<Step title="已完成" content="这里是该步骤的描述信息">-->
+            <!--<div style="font-size: 16px; color: green">这里是该步骤的描述信息1</div>-->
+        <!--</Step>-->
+        <!--<Step title="进行中" content="这里是该步骤的描述信息">-->
+            <!--<div style="font-size: 24px; color: red">这里是该步骤的描述信息2</div>-->
+        <!--</Step>-->
+        <!--<Step title="待进行" content="这里是该步骤的描述信息">-->
+            <!--<div style="font-size: 46px; color: blue">这里是该步骤的描述信息3</div>-->
+        <!--</Step>-->
+        <!--<Step title="待进行" content="这里是该步骤的描述信息">-->
+            <!--<div style="font-size: 24px; color: green">这里是该步骤的描述信息4</div>-->
+        <!--</Step>-->
+    <!--</Steps>-->
 </div>
 </template>
 <script>
@@ -84,7 +92,35 @@
         data () {
             return {
                 total: 512,
-                current: 0
+                current: 0,
+                index:0,
+                activitiList:[
+                    {
+                        approveUserName:'123',
+                        startTime:'1'
+                    },{
+                        approveUserName:'123',
+                        startTime:'2'
+                    }
+                ],
+                changeList:[
+                    {
+                        approveUserName:'456',
+                        startTime:'1'
+                    },{
+                        approveUserName:'456',
+                        startTime:'2'
+                    },{
+                        approveUserName:'456',
+                        startTime:'3'
+                    },{
+                        approveUserName:'456',
+                        startTime:'4'
+                    },{
+                        approveUserName:'456',
+                        startTime:'5'
+                    }
+                ]
             }
         },
         computed: {
@@ -97,7 +133,13 @@
                 } else {
                     this.current += 1;
                 }
+            },
+            change () {
+                this.activitiList = this.activitiList.concat(this.changeList);
             }
+        },
+        mounted () {
+//            this.change();
         }
     }
 </script>
diff --git a/src/components/steps/step.vue b/src/components/steps/step.vue
index 8be5431e..35edd169 100644
--- a/src/components/steps/step.vue
+++ b/src/components/steps/step.vue
@@ -16,6 +16,7 @@
     </div>
 </template>
 <script>
+    import Emitter from '../../mixins/emitter';
     import { oneOf } from '../../utils/assist';
 
     const prefixCls = 'ivu-steps';
@@ -23,6 +24,7 @@
 
     export default {
         name: 'Step',
+        mixins: [ Emitter ],
         props: {
             status: {
                 validator (value) {
@@ -49,9 +51,6 @@
                 currentStatus: ''
             };
         },
-        created () {
-            this.currentStatus = this.status;
-        },
         computed: {
             wrapClasses () {
                 return [
@@ -97,6 +96,15 @@
                     this.$parent.setNextError();
                 }
             }
+        },
+        created () {
+            this.currentStatus = this.status;
+        },
+        mounted () {
+            this.dispatch('Steps', 'append');
+        },
+        beforeDestroy () {
+            this.dispatch('Steps', 'remove');
         }
     };
 </script>
diff --git a/src/components/steps/steps.vue b/src/components/steps/steps.vue
index 4679d82f..08aa1150 100644
--- a/src/components/steps/steps.vue
+++ b/src/components/steps/steps.vue
@@ -8,6 +8,21 @@
 
     const prefixCls = 'ivu-steps';
 
+    function debounce(fn) {
+        let waiting;
+        return function() {
+            if (waiting) return;
+            waiting = true;
+            const context = this,
+                args = arguments;
+            const later = function() {
+                waiting = false;
+                fn.apply(context, args);
+            };
+            this.$nextTick(later);
+        };
+    }
+
     export default {
         name: 'Steps',
         props: {
@@ -44,11 +59,6 @@
                 ];
             }
         },
-        mounted () {
-            this.updateChildProps(true);
-            this.setNextError();
-            this.updateCurrent(true);
-        },
         methods: {
             updateChildProps (isInit) {
                 const total = this.$children.length;
@@ -98,8 +108,23 @@
                 } else {
                     this.$children[this.current].currentStatus = this.status;
                 }
+            },
+            debouncedAppendRemove () {
+                return debounce(function () {
+                    this.updateSteps();
+                });
+            },
+            updateSteps () {
+                this.updateChildProps(true);
+                this.setNextError();
+                this.updateCurrent(true);
             }
         },
+        mounted () {
+            this.updateSteps();
+            this.$on('append', this.debouncedAppendRemove());
+            this.$on('remove', this.debouncedAppendRemove());
+        },
         watch: {
             current () {
                 this.updateChildProps();