diff --git a/examples/docs/en-US/message.md b/examples/docs/en-US/message.md
index 976c38f76..65c1af7b1 100644
--- a/examples/docs/en-US/message.md
+++ b/examples/docs/en-US/message.md
@@ -45,14 +45,14 @@ Used to show the feedback of Success, Warning, Message and Error activities.
 <template>
   <el-button :plain="true" @click="open2">success</el-button>
   <el-button :plain="true" @click="open3">warning</el-button>
-  <el-button :plain="true" @click="open">message</el-button>
+  <el-button :plain="true" @click="open1">message</el-button>
   <el-button :plain="true" @click="open4">error</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         this.$message('This is a message.');
       },
       open2() {
@@ -85,23 +85,23 @@ A close button can be added.
 :::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
 ```html
 <template>
-  <el-button :plain="true" @click="open5">message</el-button>
-  <el-button :plain="true" @click="open6">success</el-button>
-  <el-button :plain="true" @click="open7">warning</el-button>
-  <el-button :plain="true" @click="open8">error</el-button>
+  <el-button :plain="true" @click="open1">message</el-button>
+  <el-button :plain="true" @click="open2">success</el-button>
+  <el-button :plain="true" @click="open3">warning</el-button>
+  <el-button :plain="true" @click="open4">error</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open1() {
         this.$message({
           showClose: true,
           message: 'This is a message.'
         });
       },
 
-      open6() {
+      open2() {
         this.$message({
           showClose: true,
           message: 'Congrats, this is a success message.',
@@ -109,7 +109,7 @@ A close button can be added.
         });
       },
 
-      open7() {
+      open3() {
         this.$message({
           showClose: true,
           message: 'Warning, this is a warning message.',
@@ -117,7 +117,7 @@ A close button can be added.
         });
       },
 
-      open8() {
+      open4() {
         this.$message({
           showClose: true,
           message: 'Oops, this is a error message.',
diff --git a/examples/docs/en-US/notification.md b/examples/docs/en-US/notification.md
index 1c1eceb03..da2d62086 100644
--- a/examples/docs/en-US/notification.md
+++ b/examples/docs/en-US/notification.md
@@ -10,7 +10,7 @@ Displays a global notification message at a corner of the page.
 <template>
   <el-button
     plain
-    @click="open">
+    @click="open1">
     Closes automatically
   </el-button>
   <el-button
@@ -23,7 +23,7 @@ Displays a global notification message at a corner of the page.
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         const h = this.$createElement;
 
         this.$notify({
@@ -49,27 +49,27 @@ Displays a global notification message at a corner of the page.
 
 We provide four types: success, warning, info and error.
 
-:::demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open5` and `open6` without passing a `type` field.
+:::demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open3` and `open4` without passing a `type` field.
 ```html
 <template>
   <el-button
     plain
-    @click="open3">
+    @click="open1">
     Success
   </el-button>
   <el-button
     plain
-    @click="open4">
+    @click="open2">
     Warning
   </el-button>
   <el-button
     plain
-    @click="open5">
+    @click="open3">
     Info
   </el-button>
   <el-button
     plain
-    @click="open6">
+    @click="open4">
     Error
   </el-button>
 </template>
@@ -77,7 +77,7 @@ We provide four types: success, warning, info and error.
 <script>
   export default {
     methods: {
-      open3() {
+      open1() {
         this.$notify({
           title: 'Success',
           message: 'This is a success message',
@@ -85,7 +85,7 @@ We provide four types: success, warning, info and error.
         });
       },
 
-      open4() {
+      open2() {
         this.$notify({
           title: 'Warning',
           message: 'This is a warning message',
@@ -93,14 +93,14 @@ We provide four types: success, warning, info and error.
         });
       },
 
-      open5() {
+      open3() {
         this.$notify.info({
           title: 'Info',
           message: 'This is an info message'
         });
       },
 
-      open6() {
+      open4() {
         this.$notify.error({
           title: 'Error',
           message: 'This is an error message'
@@ -121,22 +121,22 @@ Notification can emerge from any corner you like.
 <template>
   <el-button
     plain
-    @click="open7">
+    @click="open1">
     Top Right
   </el-button>
   <el-button
     plain
-    @click="open8">
+    @click="open2">
     Bottom Right
   </el-button>
   <el-button
     plain
-    @click="open9">
+    @click="open3">
     Bottom Left
   </el-button>
   <el-button
     plain
-    @click="open10">
+    @click="open4">
     Top Left
   </el-button>
 </template>
@@ -144,14 +144,14 @@ Notification can emerge from any corner you like.
 <script>
   export default {
     methods: {
-      open7() {
+      open1() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the top right corner'
         });
       },
 
-      open8() {
+      open2() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the bottom right corner',
@@ -159,7 +159,7 @@ Notification can emerge from any corner you like.
         });
       },
 
-      open9() {
+      open3() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the bottom left corner',
@@ -167,7 +167,7 @@ Notification can emerge from any corner you like.
         });
       },
 
-      open10() {
+      open4() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the top left corner',
@@ -189,7 +189,7 @@ Customize Notification's offset from the edge of the screen.
 <template>
   <el-button
     plain
-    @click="open11">
+    @click="open">
     Notification with offset
   </el-button>
 </template>
@@ -197,7 +197,7 @@ Customize Notification's offset from the edge of the screen.
 <script>
   export default {
     methods: {
-      open11() {
+      open() {
         this.$notify.success({
           title: 'Success',
           message: 'This is a success message',
@@ -218,7 +218,7 @@ Customize Notification's offset from the edge of the screen.
 <template>
   <el-button
     plain
-    @click="open12">
+    @click="open">
     Use HTML String
   </el-button>
 </template>
@@ -226,7 +226,7 @@ Customize Notification's offset from the edge of the screen.
 <script>
   export default {
     methods: {
-      open12() {
+      open() {
         this.$notify({
           title: 'HTML String',
           dangerouslyUseHTMLString: true,
@@ -252,7 +252,7 @@ It is possible to hide the close button
 <template>
   <el-button
     plain
-    @click="open13">
+    @click="open">
     Hide close button
     </el-button>
 </template>
@@ -260,7 +260,7 @@ It is possible to hide the close button
 <script>
   export default {
     methods: {
-      open13() {
+      open() {
         this.$notify.success({
           title: 'Info',
           message: 'This is a message without close button',
diff --git a/examples/docs/en-US/popover.md b/examples/docs/en-US/popover.md
index f00b44022..f95963a6a 100644
--- a/examples/docs/en-US/popover.md
+++ b/examples/docs/en-US/popover.md
@@ -115,11 +115,11 @@ Of course, you can nest other operations. It's more light-weight than using a di
 <el-popover
   placement="top"
   width="160"
-  v-model="visible2">
+  v-model="visible">
   <p>Are you sure to delete this?</p>
   <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
-    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
+    <el-button size="mini" type="text" @click="visible = false">cancel</el-button>
+    <el-button type="primary" size="mini" @click="visible = false">confirm</el-button>
   </div>
   <el-button slot="reference">Delete</el-button>
 </el-popover>
@@ -128,7 +128,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
   export default {
     data() {
       return {
-        visible2: false,
+        visible: false,
       };
     }
   }
diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md
index d9d7d6491..54efd9cbc 100644
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -189,7 +189,7 @@ Multiple select uses tags to display selected options.
 :::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute.
 ```html
 <template>
-  <el-select v-model="value5" multiple placeholder="Select">
+  <el-select v-model="value1" multiple placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -199,7 +199,7 @@ Multiple select uses tags to display selected options.
   </el-select>
   
   <el-select
-    v-model="value11"
+    v-model="value2"
     multiple
     collapse-tags
     style="margin-left: 20px;"
@@ -233,8 +233,8 @@ Multiple select uses tags to display selected options.
           value: 'Option5',
           label: 'Option5'
         }],
-        value5: [],
-        value11: []
+        value1: [],
+        value2: []
       }
     }
   }
diff --git a/examples/docs/en-US/switch.md b/examples/docs/en-US/switch.md
index f4c30b112..954dc20f5 100644
--- a/examples/docs/en-US/switch.md
+++ b/examples/docs/en-US/switch.md
@@ -32,13 +32,13 @@ Switch is used for switching between two opposing states.
 
 ```html
 <el-switch
-  v-model="value3"
+  v-model="value1"
   active-text="Pay by month"
   inactive-text="Pay by year">
 </el-switch>
 <el-switch
   style="display: block"
-  v-model="value4"
+  v-model="value2"
   active-color="#13ce66"
   inactive-color="#ff4949"
   active-text="Pay by month"
@@ -49,8 +49,8 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value3: true,
-        value4: true
+        value1: true,
+        value2: true
       }
     }
   };
@@ -63,9 +63,9 @@ Switch is used for switching between two opposing states.
 :::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
 
 ```html
-<el-tooltip :content="'Switch value: ' + value5" placement="top">
+<el-tooltip :content="'Switch value: ' + value" placement="top">
   <el-switch
-    v-model="value5"
+    v-model="value"
     active-color="#13ce66"
     inactive-color="#ff4949"
     active-value="100"
@@ -77,7 +77,7 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value5: '100'
+        value: '100'
       }
     }
   };
@@ -92,11 +92,11 @@ Switch is used for switching between two opposing states.
 
 ```html
 <el-switch
-  v-model="value6"
+  v-model="value1"
   disabled>
 </el-switch>
 <el-switch
-  v-model="value7"
+  v-model="value2"
   disabled>
 </el-switch>
 
@@ -104,8 +104,8 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value6: true,
-        value7: false
+        value1: true,
+        value2: false
       }
     }
   };
diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md
index 261aae76d..a61629e6f 100644
--- a/examples/docs/en-US/time-picker.md
+++ b/examples/docs/en-US/time-picker.md
@@ -9,7 +9,7 @@ Provide a list of fixed time for users to choose.
 :::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.
 ```html
 <el-time-select
-  v-model="value1"
+  v-model="value"
   :picker-options="{
     start: '08:30',
     step: '00:15',
@@ -22,7 +22,7 @@ Provide a list of fixed time for users to choose.
   export default {
     data() {
       return {
-        value1: ''
+        value: ''
       };
     }
   }
@@ -39,7 +39,7 @@ Can pick an arbitrary time.
 ```html
 <template>
   <el-time-picker
-    v-model="value2"
+    v-model="value1"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -47,7 +47,7 @@ Can pick an arbitrary time.
   </el-time-picker>
   <el-time-picker
     arrow-control
-    v-model="value3"
+    v-model="value2"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -59,8 +59,8 @@ Can pick an arbitrary time.
   export default {
     data() {
       return {
-        value2: new Date(2016, 9, 10, 18, 40),
-        value3: new Date(2016, 9, 10, 18, 40)
+        value1: new Date(2016, 9, 10, 18, 40),
+        value2: new Date(2016, 9, 10, 18, 40)
       };
     }
   }
@@ -118,7 +118,7 @@ Can pick an arbitrary time range.
 <template>
   <el-time-picker
     is-range
-    v-model="value4"
+    v-model="value1"
     range-separator="To"
     start-placeholder="Start time"
     end-placeholder="End time">
@@ -126,7 +126,7 @@ Can pick an arbitrary time range.
   <el-time-picker
     is-range
     arrow-control
-    v-model="value5"
+    v-model="value2"
     range-separator="To"
     start-placeholder="Start time"
     end-placeholder="End time">
@@ -137,8 +137,8 @@ Can pick an arbitrary time range.
   export default {
     data() {
       return {
-        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
       };
     }
   }
diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md
index fe9db38ab..7192c1453 100644
--- a/examples/docs/en-US/tree.md
+++ b/examples/docs/en-US/tree.md
@@ -139,7 +139,7 @@ Used for node selection.
 ```html
 <el-tree
   :props="props"
-  :load="loadNode1"
+  :load="loadNode"
   lazy
   show-checkbox>
 </el-tree>
@@ -156,7 +156,7 @@ Used for node selection.
       };
     },
     methods: {
-      loadNode1(node, resolve) {
+      loadNode(node, resolve) {
         if (node.level === 0) {
           return resolve([{ name: 'region' }]);
         }
@@ -547,14 +547,14 @@ Tree nodes can be filtered
   :props="defaultProps"
   default-expand-all
   :filter-node-method="filterNode"
-  ref="tree2">
+  ref="tree">
 </el-tree>
 
 <script>
   export default {
     watch: {
       filterText(val) {
-        this.$refs.tree2.filter(val);
+        this.$refs.tree.filter(val);
       }
     },
 
diff --git a/examples/docs/es/message.md b/examples/docs/es/message.md
index 80bbbb0ff..8c387e977 100644
--- a/examples/docs/es/message.md
+++ b/examples/docs/es/message.md
@@ -45,14 +45,14 @@ Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error a
 <template>
   <el-button :plain="true" @click="open2">success</el-button>
   <el-button :plain="true" @click="open3">warning</el-button>
-  <el-button :plain="true" @click="open">message</el-button>
+  <el-button :plain="true" @click="open1">message</el-button>
   <el-button :plain="true" @click="open4">error</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         this.$message('This is a message.');
       },
       open2() {
@@ -85,23 +85,23 @@ Un boton para cerrar que puede ser agregado.
 :::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atriubuto `duration` que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a `0`.
 ```html
 <template>
-  <el-button :plain="true" @click="open5">message</el-button>
-  <el-button :plain="true" @click="open6">success</el-button>
-  <el-button :plain="true" @click="open7">warning</el-button>
-  <el-button :plain="true" @click="open8">error</el-button>
+  <el-button :plain="true" @click="open1">message</el-button>
+  <el-button :plain="true" @click="open2">success</el-button>
+  <el-button :plain="true" @click="open3">warning</el-button>
+  <el-button :plain="true" @click="open4">error</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open1() {
         this.$message({
           showClose: true,
           message: 'This is a message.'
         });
       },
 
-      open6() {
+      open2() {
         this.$message({
           showClose: true,
           message: 'Congrats, this is a success message.',
@@ -109,7 +109,7 @@ Un boton para cerrar que puede ser agregado.
         });
       },
 
-      open7() {
+      open3() {
         this.$message({
           showClose: true,
           message: 'Warning, this is a warning message.',
@@ -117,7 +117,7 @@ Un boton para cerrar que puede ser agregado.
         });
       },
 
-      open8() {
+      open4() {
         this.$message({
           showClose: true,
           message: 'Oops, this is a error message.',
diff --git a/examples/docs/es/notification.md b/examples/docs/es/notification.md
index cf48f2a68..c707f00e8 100644
--- a/examples/docs/es/notification.md
+++ b/examples/docs/es/notification.md
@@ -10,7 +10,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
 <template>
   <el-button
     plain
-    @click="open">
+    @click="open1">
     Closes automatically
   </el-button>
   <el-button
@@ -23,7 +23,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         const h = this.$createElement;
 
         this.$notify({
@@ -49,28 +49,28 @@ Muestra un mensaje de notificación global en una esquina de la página.
 
 Proporcionamos cuatro tipos: success, warning, info y error.
 
-:::demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type`  y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open5` y `open6` sin pasar un campo `type`.
+:::demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type`  y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open3` y `open4` sin pasar un campo `type`.
 
 ```html
 <template>
   <el-button
     plain
-    @click="open3">
+    @click="open1">
     Success
   </el-button>
   <el-button
     plain
-    @click="open4">
+    @click="open2">
     Warning
   </el-button>
   <el-button
     plain
-    @click="open5">
+    @click="open3">
     Info
   </el-button>
   <el-button
     plain
-    @click="open6">
+    @click="open4">
     Error
   </el-button>
 </template>
@@ -78,7 +78,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
 <script>
   export default {
     methods: {
-      open3() {
+      open1() {
         this.$notify({
           title: 'Success',
           message: 'This is a success message',
@@ -86,7 +86,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
         });
       },
 
-      open4() {
+      open2() {
         this.$notify({
           title: 'Warning',
           message: 'This is a warning message',
@@ -94,14 +94,14 @@ Proporcionamos cuatro tipos: success, warning, info y error.
         });
       },
 
-      open5() {
+      open3() {
         this.$notify.info({
           title: 'Info',
           message: 'This is an info message'
         });
       },
 
-      open6() {
+      open4() {
         this.$notify.error({
           title: 'Error',
           message: 'This is an error message'
@@ -123,22 +123,22 @@ La notificación puede surgir de cualquier rincón que uno desee.
 <template>
   <el-button
     plain
-    @click="open7">
+    @click="open1">
     Top Right
   </el-button>
   <el-button
     plain
-    @click="open8">
+    @click="open2">
     Bottom Right
   </el-button>
   <el-button
     plain
-    @click="open9">
+    @click="open3">
     Bottom Left
   </el-button>
   <el-button
     plain
-    @click="open10">
+    @click="open4">
     Top Left
   </el-button>
 </template>
@@ -146,14 +146,14 @@ La notificación puede surgir de cualquier rincón que uno desee.
 <script>
   export default {
     methods: {
-      open7() {
+      open1() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the top right corner'
         });
       },
 
-      open8() {
+      open2() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the bottom right corner',
@@ -161,7 +161,7 @@ La notificación puede surgir de cualquier rincón que uno desee.
         });
       },
 
-      open9() {
+      open3() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the bottom left corner',
@@ -169,7 +169,7 @@ La notificación puede surgir de cualquier rincón que uno desee.
         });
       },
 
-      open10() {
+      open4() {
         this.$notify({
           title: 'Custom Position',
           message: 'I\'m at the top left corner',
@@ -192,7 +192,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
 <template>
   <el-button
     plain
-    @click="open11">
+    @click="open">
     Notification with offset
   </el-button>
 </template>
@@ -200,7 +200,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
 <script>
   export default {
     methods: {
-      open11() {
+      open() {
         this.$notify.success({
           title: 'Success',
           message: 'This is a success message',
@@ -222,7 +222,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
 <template>
   <el-button
     plain
-    @click="open12">
+    @click="open">
     Use HTML String
   </el-button>
 </template>
@@ -230,7 +230,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
 <script>
   export default {
     methods: {
-      open12() {
+      open() {
         this.$notify({
           title: 'HTML String',
           dangerouslyUseHTMLString: true,
@@ -259,7 +259,7 @@ Es posible ocultar el botón de cerrar
 <template>
   <el-button
     plain
-    @click="open13">
+    @click="open">
     Hide close button
     </el-button>
 </template>
@@ -267,7 +267,7 @@ Es posible ocultar el botón de cerrar
 <script>
   export default {
     methods: {
-      open13() {
+      open() {
         this.$notify.success({
           title: 'Info',
           message: 'This is a message without close button',
diff --git a/examples/docs/es/popover.md b/examples/docs/es/popover.md
index a20534dc1..0d8927960 100644
--- a/examples/docs/es/popover.md
+++ b/examples/docs/es/popover.md
@@ -114,11 +114,11 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 <el-popover
   placement="top"
   width="160"
-  v-model="visible2">
+  v-model="visible">
   <p>Are you sure to delete this?</p>
   <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
-    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
+    <el-button size="mini" type="text" @click="visible = false">cancel</el-button>
+    <el-button type="primary" size="mini" @click="visible = false">confirm</el-button>
   </div>
   <el-button slot="reference">Delete</el-button>
 </el-popover>
@@ -127,7 +127,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
   export default {
     data() {
       return {
-        visible2: false,
+        visible: false,
       };
     }
   }
diff --git a/examples/docs/es/select.md b/examples/docs/es/select.md
index 5748cde70..f9b31feec 100644
--- a/examples/docs/es/select.md
+++ b/examples/docs/es/select.md
@@ -192,7 +192,7 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
 
 ```html
 <template>
-  <el-select v-model="value5" multiple placeholder="Select">
+  <el-select v-model="value1" multiple placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -202,7 +202,7 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
   </el-select>
 
   <el-select
-    v-model="value11"
+    v-model="value2"
     multiple
     collapse-tags
     style="margin-left: 20px;"
@@ -236,8 +236,8 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
           value: 'Option5',
           label: 'Option5'
         }],
-        value5: [],
-        value11: []
+        value1: [],
+        value2: []
       }
     }
   }
diff --git a/examples/docs/es/slider.md b/examples/docs/es/slider.md
index f007ec8b9..9c1170344 100644
--- a/examples/docs/es/slider.md
+++ b/examples/docs/es/slider.md
@@ -64,14 +64,14 @@ Las opciones pueden ser discretas.
   <div class="block">
     <span class="demonstration">Breakpoints not displayed</span>
     <el-slider
-      v-model="value"
+      v-model="value1"
       :step="10">
     </el-slider>
   </div>
   <div class="block">
     <span class="demonstration">Breakpoints displayed</span>
     <el-slider
-      v-model="value"
+      v-model="value2"
       :step="10"
       show-stops>
     </el-slider>
@@ -82,8 +82,8 @@ Las opciones pueden ser discretas.
   export default {
     data() {
       return {
-        value: 0,
-        value: 0
+        value1: 0,
+        value2: 0
       }
     }
   }
diff --git a/examples/docs/es/switch.md b/examples/docs/es/switch.md
index efb533a5e..f02afff36 100644
--- a/examples/docs/es/switch.md
+++ b/examples/docs/es/switch.md
@@ -33,13 +33,13 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
 
 ```html
 <el-switch
-  v-model="value3"
+  v-model="value1"
   active-text="Pay by month"
   inactive-text="Pay by year">
 </el-switch>
 <el-switch
   style="display: block"
-  v-model="value4"
+  v-model="value2"
   active-color="#13ce66"
   inactive-color="#ff4949"
   active-text="Pay by month"
@@ -50,8 +50,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
   export default {
     data() {
       return {
-        value3: true,
-        value4: true
+        value1: true,
+        value2: true
       }
     }
   };
@@ -64,9 +64,9 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
 :::demo Puede establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`.
 
 ```html
-<el-tooltip :content="'Switch value: ' + value5" placement="top">
+<el-tooltip :content="'Switch value: ' + value" placement="top">
   <el-switch
-    v-model="value5"
+    v-model="value"
     active-color="#13ce66"
     inactive-color="#ff4949"
     active-value="100"
@@ -78,7 +78,7 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
   export default {
     data() {
       return {
-        value5: '100'
+        value: '100'
       }
     }
   };
@@ -93,11 +93,11 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
 
 ```html
 <el-switch
-  v-model="value6"
+  v-model="value1"
   disabled>
 </el-switch>
 <el-switch
-  v-model="value7"
+  v-model="value2"
   disabled>
 </el-switch>
 
@@ -105,8 +105,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
   export default {
     data() {
       return {
-        value6: true,
-        value7: false
+        value1: true,
+        value2: false
       }
     }
   };
diff --git a/examples/docs/es/time-picker.md b/examples/docs/es/time-picker.md
index 9f4963896..cf9683966 100644
--- a/examples/docs/es/time-picker.md
+++ b/examples/docs/es/time-picker.md
@@ -9,7 +9,7 @@ Provee una lista de tiempo fijo para que los usuarios escogan.
 :::demo Use el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`.
 ```html
 <el-time-select
-  v-model="value1"
+  v-model="value"
   :picker-options="{
     start: '08:30',
     step: '00:15',
@@ -22,7 +22,7 @@ Provee una lista de tiempo fijo para que los usuarios escogan.
   export default {
     data() {
       return {
-        value1: ''
+        value: ''
       };
     }
   }
@@ -39,7 +39,7 @@ Un tiempo arbitrario puede ser escogido.
 ```html
 <template>
   <el-time-picker
-    v-model="value2"
+    v-model="value1"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -47,7 +47,7 @@ Un tiempo arbitrario puede ser escogido.
   </el-time-picker>
   <el-time-picker
     arrow-control
-    v-model="value3"
+    v-model="value2"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -59,8 +59,8 @@ Un tiempo arbitrario puede ser escogido.
   export default {
     data() {
       return {
-        value2: new Date(2016, 9, 10, 18, 40),
-        value3: new Date(2016, 9, 10, 18, 40)
+        value1: new Date(2016, 9, 10, 18, 40),
+        value2: new Date(2016, 9, 10, 18, 40)
       };
     }
   }
@@ -118,7 +118,7 @@ Es posible escoger un rango de tiempo arbitrario.
 <template>
   <el-time-picker
     is-range
-    v-model="value4"
+    v-model="value1"
     range-separator="To"
     start-placeholder="Start time"
     end-placeholder="End time">
@@ -126,7 +126,7 @@ Es posible escoger un rango de tiempo arbitrario.
   <el-time-picker
     is-range
     arrow-control
-    v-model="value5"
+    v-model="value2"
     range-separator="To"
     start-placeholder="Start time"
     end-placeholder="End time">
@@ -137,8 +137,8 @@ Es posible escoger un rango de tiempo arbitrario.
   export default {
     data() {
       return {
-        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
       };
     }
   }
diff --git a/examples/docs/es/tree.md b/examples/docs/es/tree.md
index 123becb10..539eac696 100644
--- a/examples/docs/es/tree.md
+++ b/examples/docs/es/tree.md
@@ -139,7 +139,7 @@ Usado para la selección de nodos.
 ```html
 <el-tree
   :props="props"
-  :load="loadNode1"
+  :load="loadNode"
   lazy
   show-checkbox>
 </el-tree>
@@ -156,7 +156,7 @@ Usado para la selección de nodos.
       };
     },
     methods: {
-      loadNode1(node, resolve) {
+      loadNode(node, resolve) {
         if (node.level === 0) {
           return resolve([{ name: 'region' }]);
         }
@@ -547,14 +547,14 @@ Los nodos del árbol se pueden filtrar.
   :props="defaultProps"
   default-expand-all
   :filter-node-method="filterNode"
-  ref="tree2">
+  ref="tree">
 </el-tree>
 
 <script>
   export default {
     watch: {
       filterText(val) {
-        this.$refs.tree2.filter(val);
+        this.$refs.tree.filter(val);
       }
     },
 
diff --git a/examples/docs/fr-FR/message.md b/examples/docs/fr-FR/message.md
index 4c47df23e..97540c565 100644
--- a/examples/docs/fr-FR/message.md
+++ b/examples/docs/fr-FR/message.md
@@ -45,14 +45,14 @@ Utilisé pour montrer un retour d'activités Success, Warning, Message ou Error.
 <template>
   <el-button :plain="true" @click="open2">success</el-button>
   <el-button :plain="true" @click="open3">warning</el-button>
-  <el-button :plain="true" @click="open">message</el-button>
+  <el-button :plain="true" @click="open1">message</el-button>
   <el-button :plain="true" @click="open4">error</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         this.$message('Ceci est un message.');
       },
       open2() {
@@ -85,23 +85,23 @@ Un bouton de fermeture peut être ajouté.
 :::demo Un Message ne peut être fermé par défaut. Utiliséez `showClose` si vous avez besoin de pouvoir le fermer. De plus, tout comme Notification, Message possède une `duration` réglable. La durée par défaut est de 3000 ms, et infinie si à `0`.
 ```html
 <template>
-  <el-button :plain="true" @click="open5">message</el-button>
-  <el-button :plain="true" @click="open6">success</el-button>
-  <el-button :plain="true" @click="open7">warning</el-button>
-  <el-button :plain="true" @click="open8">error</el-button>
+  <el-button :plain="true" @click="open1">message</el-button>
+  <el-button :plain="true" @click="open2">success</el-button>
+  <el-button :plain="true" @click="open3">warning</el-button>
+  <el-button :plain="true" @click="open4">error</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open1() {
         this.$message({
           showClose: true,
           message: 'Ceci est un message.'
         });
       },
 
-      open6() {
+      open2() {
         this.$message({
           showClose: true,
           message: 'Félicitations, ceci est un message de succès.',
@@ -109,7 +109,7 @@ Un bouton de fermeture peut être ajouté.
         });
       },
 
-      open7() {
+      open3() {
         this.$message({
           showClose: true,
           message: 'Attention, ceci est un avertissement.',
@@ -117,7 +117,7 @@ Un bouton de fermeture peut être ajouté.
         });
       },
 
-      open8() {
+      open4() {
         this.$message({
           showClose: true,
           message: 'Ouups, ceci est une erreur.',
diff --git a/examples/docs/fr-FR/notification.md b/examples/docs/fr-FR/notification.md
index 5747bbd62..b444c4dc8 100644
--- a/examples/docs/fr-FR/notification.md
+++ b/examples/docs/fr-FR/notification.md
@@ -10,7 +10,7 @@ Affiche une notification globale dans un coin de la page.
 <template>
   <el-button
     plain
-    @click="open">
+    @click="open1">
     Se ferme automatiquement
   </el-button>
   <el-button
@@ -23,7 +23,7 @@ Affiche une notification globale dans un coin de la page.
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         const h = this.$createElement;
 
         this.$notify({
@@ -49,27 +49,27 @@ Affiche une notification globale dans un coin de la page.
 
 We provide four types: success, warning, info and error.
 
-:::demo Element fournit quatre types de notifications: `success`, `warning`, `info` et `error`. Il sont choisis grâce au champs `type`, et n'importe quelle autre valeur sera ignorée. Il existe des méthodes  enregistrées pour chaque type, comme dans `open5` et `open6`, qui ne nécessitent donc pas le champs `type`.
+:::demo Element fournit quatre types de notifications: `success`, `warning`, `info` et `error`. Il sont choisis grâce au champs `type`, et n'importe quelle autre valeur sera ignorée. Il existe des méthodes  enregistrées pour chaque type, comme dans `open3` et `open4`, qui ne nécessitent donc pas le champs `type`.
 ```html
 <template>
   <el-button
     plain
-    @click="open3">
+    @click="open1">
     Success
   </el-button>
   <el-button
     plain
-    @click="open4">
+    @click="open2">
     Warning
   </el-button>
   <el-button
     plain
-    @click="open5">
+    @click="open3">
     Info
   </el-button>
   <el-button
     plain
-    @click="open6">
+    @click="open4">
     Error
   </el-button>
 </template>
@@ -77,7 +77,7 @@ We provide four types: success, warning, info and error.
 <script>
   export default {
     methods: {
-      open3() {
+      open1() {
         this.$notify({
           title: 'Success',
           message: 'Ceci est un message de succès',
@@ -85,7 +85,7 @@ We provide four types: success, warning, info and error.
         });
       },
 
-      open4() {
+      open2() {
         this.$notify({
           title: 'Warning',
           message: 'Ceci est un avertissement',
@@ -93,14 +93,14 @@ We provide four types: success, warning, info and error.
         });
       },
 
-      open5() {
+      open3() {
         this.$notify.info({
           title: 'Info',
           message: 'Ceci est une information'
         });
       },
 
-      open6() {
+      open4() {
         this.$notify.error({
           title: 'Error',
           message: 'Ceci est une erreur'
@@ -121,22 +121,22 @@ La notification peut apparaître dans le coin de votre choix.
 <template>
   <el-button
     plain
-    @click="open7">
+    @click="open1">
     Top Right
   </el-button>
   <el-button
     plain
-    @click="open8">
+    @click="open2">
     Bottom Right
   </el-button>
   <el-button
     plain
-    @click="open9">
+    @click="open3">
     Bottom Left
   </el-button>
   <el-button
     plain
-    @click="open10">
+    @click="open4">
     Top Left
   </el-button>
 </template>
@@ -144,14 +144,14 @@ La notification peut apparaître dans le coin de votre choix.
 <script>
   export default {
     methods: {
-      open7() {
+      open1() {
         this.$notify({
           title: 'Custom Position',
           message: 'Je suis dans le coin supérieur droit'
         });
       },
 
-      open8() {
+      open2() {
         this.$notify({
           title: 'Custom Position',
           message: 'Je suis dans le coin inférieur droit',
@@ -159,7 +159,7 @@ La notification peut apparaître dans le coin de votre choix.
         });
       },
 
-      open9() {
+      open3() {
         this.$notify({
           title: 'Custom Position',
           message: 'Je suis dans le coin inférieur gauche',
@@ -167,7 +167,7 @@ La notification peut apparaître dans le coin de votre choix.
         });
       },
 
-      open10() {
+      open4() {
         this.$notify({
           title: 'Custom Position',
           message: 'Je suis dans le coin supérieur gauche',
@@ -189,7 +189,7 @@ Vous pouvez décaler l'emplacement de la notification par rapport au bord de la
 <template>
   <el-button
     plain
-    @click="open11">
+    @click="open">
     Notification avec décalage
   </el-button>
 </template>
@@ -197,7 +197,7 @@ Vous pouvez décaler l'emplacement de la notification par rapport au bord de la
 <script>
   export default {
     methods: {
-      open11() {
+      open() {
         this.$notify.success({
           title: 'Success',
           message: 'Ceci est un message de succès',
@@ -220,7 +220,7 @@ L'attribut `message` supporte le HTML.
 <template>
   <el-button
     plain
-    @click="open12">
+    @click="open">
     Utiliser du HTML
   </el-button>
 </template>
@@ -228,7 +228,7 @@ L'attribut `message` supporte le HTML.
 <script>
   export default {
     methods: {
-      open12() {
+      open() {
         this.$notify({
           title: 'HTML String',
           dangerouslyUseHTMLString: true,
@@ -255,7 +255,7 @@ Il est possible de cacher le bouton de fermeture.
 <template>
   <el-button
     plain
-    @click="open13">
+    @click="open">
     Bouton de fermeture caché
     </el-button>
 </template>
@@ -263,7 +263,7 @@ Il est possible de cacher le bouton de fermeture.
 <script>
   export default {
     methods: {
-      open13() {
+      open() {
         this.$notify.success({
           title: 'Info',
           message: 'Ceci est un message sans bouton de fermeture',
diff --git a/examples/docs/fr-FR/popover.md b/examples/docs/fr-FR/popover.md
index 1f7961460..aab3633dd 100644
--- a/examples/docs/fr-FR/popover.md
+++ b/examples/docs/fr-FR/popover.md
@@ -115,11 +115,11 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
 <el-popover
   placement="top"
   width="160"
-  v-model="visible2">
+  v-model="visible">
   <p>Voulez-vous vraiment supprimer ceci?</p>
   <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click="visible2 = false">Annuler</el-button>
-    <el-button type="primary" size="mini" @click="visible2 = false">Confirmer</el-button>
+    <el-button size="mini" type="text" @click="visible = false">Annuler</el-button>
+    <el-button type="primary" size="mini" @click="visible = false">Confirmer</el-button>
   </div>
   <el-button slot="reference">Supprimer</el-button>
 </el-popover>
@@ -128,7 +128,7 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
   export default {
     data() {
       return {
-        visible2: false,
+        visible: false,
       };
     }
   }
diff --git a/examples/docs/fr-FR/select.md b/examples/docs/fr-FR/select.md
index 08068c58d..515c17abb 100644
--- a/examples/docs/fr-FR/select.md
+++ b/examples/docs/fr-FR/select.md
@@ -189,7 +189,7 @@ Les sélecteurs multiples utilisent des tags pour afficher les différentes opti
 :::demo Ajoutez `multiple` à `el-select` pour le changer en sélecteur multiple. La valeur de `v-model` devient un tableau contenant toutes les options. Par défaut les différents choix sont affichés sous forme de tags. Vous pouvez réduire leur nombre en utilisant l'attribut `collapse-tags`.
 ```html
 <template>
-  <el-select v-model="value5" multiple placeholder="Select">
+  <el-select v-model="value1" multiple placeholder="Select">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -199,7 +199,7 @@ Les sélecteurs multiples utilisent des tags pour afficher les différentes opti
   </el-select>
 
   <el-select
-    v-model="value11"
+    v-model="value2"
     multiple
     collapse-tags
     style="margin-left: 20px;"
@@ -233,8 +233,8 @@ Les sélecteurs multiples utilisent des tags pour afficher les différentes opti
           value: 'Option5',
           label: 'Option5'
         }],
-        value5: [],
-        value11: []
+        value1: [],
+        value2: []
       }
     }
   }
diff --git a/examples/docs/fr-FR/switch.md b/examples/docs/fr-FR/switch.md
index ff4a74bed..023625135 100644
--- a/examples/docs/fr-FR/switch.md
+++ b/examples/docs/fr-FR/switch.md
@@ -34,13 +34,13 @@ Switch est utilisé pour choisir entre deux états opposés.
 
 ```html
 <el-switch
-  v-model="value3"
+  v-model="value1"
   active-text="Paiement mensuel"
   inactive-text="Paiement annuel">
 </el-switch>
 <el-switch
   style="display: block"
-  v-model="value4"
+  v-model="value2"
   active-color="#13ce66"
   inactive-color="#ff4949"
   active-text="Paiement mensuel"
@@ -51,8 +51,8 @@ Switch est utilisé pour choisir entre deux états opposés.
   export default {
     data() {
       return {
-        value3: true,
-        value4: true
+        value1: true,
+        value2: true
       }
     }
   };
@@ -65,9 +65,9 @@ Switch est utilisé pour choisir entre deux états opposés.
 :::demo Vous pouvez utiliser `active-value` et `inactive-value` pour déterminer la valeur de chaque état. Ils prennent un `Boolean`, `String` ou `Number`.
 
 ```html
-<el-tooltip :content="'Valeur de l\'état: ' + value5" placement="top">
+<el-tooltip :content="'Valeur de l\'état: ' + value" placement="top">
   <el-switch
-    v-model="value5"
+    v-model="value"
     active-color="#13ce66"
     inactive-color="#ff4949"
     active-value="100"
@@ -79,7 +79,7 @@ Switch est utilisé pour choisir entre deux états opposés.
   export default {
     data() {
       return {
-        value5: '100'
+        value: '100'
       }
     }
   };
@@ -94,11 +94,11 @@ Switch est utilisé pour choisir entre deux états opposés.
 
 ```html
 <el-switch
-  v-model="value6"
+  v-model="value1"
   disabled>
 </el-switch>
 <el-switch
-  v-model="value7"
+  v-model="value2"
   disabled>
 </el-switch>
 
@@ -106,8 +106,8 @@ Switch est utilisé pour choisir entre deux états opposés.
   export default {
     data() {
       return {
-        value6: true,
-        value7: false
+        value1: true,
+        value2: false
       }
     }
   };
diff --git a/examples/docs/fr-FR/time-picker.md b/examples/docs/fr-FR/time-picker.md
index bd516e016..cfc327732 100644
--- a/examples/docs/fr-FR/time-picker.md
+++ b/examples/docs/fr-FR/time-picker.md
@@ -9,7 +9,7 @@ Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisi
 :::demo Utilisez `el-time-select` puis assignez un horaire de début, de fin et un pas grâce aux propriétés `start`, `end` et `step` de l'attribut `picker-options`.
 ```html
 <el-time-select
-  v-model="value1"
+  v-model="value"
   :picker-options="{
     start: '08:30',
     step: '00:15',
@@ -22,7 +22,7 @@ Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisi
   export default {
     data() {
       return {
-        value1: ''
+        value: ''
       };
     }
   }
@@ -39,7 +39,7 @@ Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
 ```html
 <template>
   <el-time-picker
-    v-model="value2"
+    v-model="value1"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -47,7 +47,7 @@ Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
   </el-time-picker>
   <el-time-picker
     arrow-control
-    v-model="value3"
+    v-model="value2"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -59,8 +59,8 @@ Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
   export default {
     data() {
       return {
-        value2: new Date(2016, 9, 10, 18, 40),
-        value3: new Date(2016, 9, 10, 18, 40)
+        value1: new Date(2016, 9, 10, 18, 40),
+        value2: new Date(2016, 9, 10, 18, 40)
       };
     }
   }
@@ -118,7 +118,7 @@ Vous pouvez également définir un intervalle libre.
 <template>
   <el-time-picker
     is-range
-    v-model="value4"
+    v-model="value1"
     range-separator="To"
     start-placeholder="Horaire de début"
     end-placeholder="Horaire de fin">
@@ -126,7 +126,7 @@ Vous pouvez également définir un intervalle libre.
   <el-time-picker
     is-range
     arrow-control
-    v-model="value5"
+    v-model="value2"
     range-separator="To"
     start-placeholder="Horaire de début"
     end-placeholder="Horaire de fin">
@@ -137,8 +137,8 @@ Vous pouvez également définir un intervalle libre.
   export default {
     data() {
       return {
-        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
       };
     }
   }
diff --git a/examples/docs/fr-FR/tree.md b/examples/docs/fr-FR/tree.md
index 1bd7b7d6a..9b01918f0 100644
--- a/examples/docs/fr-FR/tree.md
+++ b/examples/docs/fr-FR/tree.md
@@ -139,7 +139,7 @@ Vous pouvez activer la sélection des noeuds.
 ```html
 <el-tree
   :props="props"
-  :load="loadNode1"
+  :load="loadNode"
   lazy
   show-checkbox>
 </el-tree>
@@ -156,7 +156,7 @@ Vous pouvez activer la sélection des noeuds.
       };
     },
     methods: {
-      loadNode1(node, resolve) {
+      loadNode(node, resolve) {
         if (node.level === 0) {
           return resolve([{ name: 'region' }]);
         }
@@ -550,14 +550,14 @@ Les noeuds peuvent être filtrés par mot-clé.
   :props="defaultProps"
   default-expand-all
   :filter-node-method="filterNode"
-  ref="tree2">
+  ref="tree">
 </el-tree>
 
 <script>
   export default {
     watch: {
       filterText(val) {
-        this.$refs.tree2.filter(val);
+        this.$refs.tree.filter(val);
       }
     },
 
diff --git a/examples/docs/zh-CN/message.md b/examples/docs/zh-CN/message.md
index 4aec4d218..f64bf8606 100644
--- a/examples/docs/zh-CN/message.md
+++ b/examples/docs/zh-CN/message.md
@@ -45,14 +45,14 @@
 <template>
   <el-button :plain="true" @click="open2">成功</el-button>
   <el-button :plain="true" @click="open3">警告</el-button>
-  <el-button :plain="true" @click="open">消息</el-button>
+  <el-button :plain="true" @click="open1">消息</el-button>
   <el-button :plain="true" @click="open4">错误</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         this.$message('这是一条消息提示');
       },
       open2() {
@@ -85,23 +85,23 @@
 :::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
 ```html
 <template>
-  <el-button :plain="true" @click="open5">消息</el-button>
-  <el-button :plain="true" @click="open6">成功</el-button>
-  <el-button :plain="true" @click="open7">警告</el-button>
-  <el-button :plain="true" @click="open8">错误</el-button>
+  <el-button :plain="true" @click="open1">消息</el-button>
+  <el-button :plain="true" @click="open2">成功</el-button>
+  <el-button :plain="true" @click="open3">警告</el-button>
+  <el-button :plain="true" @click="open4">错误</el-button>
 </template>
 
 <script>
   export default {
     methods: {
-      open5() {
+      open1() {
         this.$message({
           showClose: true,
           message: '这是一条消息提示'
         });
       },
 
-      open6() {
+      open2() {
         this.$message({
           showClose: true,
           message: '恭喜你，这是一条成功消息',
@@ -109,7 +109,7 @@
         });
       },
 
-      open7() {
+      open3() {
         this.$message({
           showClose: true,
           message: '警告哦，这是一条警告消息',
@@ -117,7 +117,7 @@
         });
       },
 
-      open8() {
+      open4() {
         this.$message({
           showClose: true,
           message: '错了哦，这是一条错误消息',
diff --git a/examples/docs/zh-CN/notification.md b/examples/docs/zh-CN/notification.md
index 83653fa4c..d3b639718 100644
--- a/examples/docs/zh-CN/notification.md
+++ b/examples/docs/zh-CN/notification.md
@@ -11,7 +11,7 @@
 <template>
   <el-button
     plain
-    @click="open">
+    @click="open1">
     可自动关闭
   </el-button>
   <el-button
@@ -24,7 +24,7 @@
 <script>
   export default {
     methods: {
-      open() {
+      open1() {
         const h = this.$createElement;
 
         this.$notify({
@@ -50,27 +50,27 @@
 
 带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息
 
-:::demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open5`和`open6`那样直接调用。
+:::demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open3`和`open4`那样直接调用。
 ```html
 <template>
   <el-button
     plain
-    @click="open3">
+    @click="open1">
     成功
   </el-button>
   <el-button
     plain
-    @click="open4">
+    @click="open2">
     警告
   </el-button>
   <el-button
     plain
-    @click="open5">
+    @click="open3">
     消息
   </el-button>
   <el-button
     plain
-    @click="open6">
+    @click="open4">
     错误
   </el-button>
 </template>
@@ -78,7 +78,7 @@
 <script>
   export default {
     methods: {
-      open3() {
+      open1() {
         this.$notify({
           title: '成功',
           message: '这是一条成功的提示消息',
@@ -86,7 +86,7 @@
         });
       },
 
-      open4() {
+      open2() {
         this.$notify({
           title: '警告',
           message: '这是一条警告的提示消息',
@@ -94,14 +94,14 @@
         });
       },
 
-      open5() {
+      open3() {
         this.$notify.info({
           title: '消息',
           message: '这是一条消息的提示消息'
         });
       },
 
-      open6() {
+      open4() {
         this.$notify.error({
           title: '错误',
           message: '这是一条错误的提示消息'
@@ -122,22 +122,22 @@
 <template>
   <el-button
     plain
-    @click="open7">
+    @click="open1">
     右上角
   </el-button>
   <el-button
     plain
-    @click="open8">
+    @click="open2">
     右下角
   </el-button>
   <el-button
     plain
-    @click="open9">
+    @click="open3">
     左下角
   </el-button>
   <el-button
     plain
-    @click="open10">
+    @click="open4">
     左上角
   </el-button>
 </template>
@@ -145,14 +145,14 @@
 <script>
   export default {
     methods: {
-      open7() {
+      open1() {
         this.$notify({
           title: '自定义位置',
           message: '右上角弹出的消息'
         });
       },
 
-      open8() {
+      open2() {
         this.$notify({
           title: '自定义位置',
           message: '右下角弹出的消息',
@@ -160,7 +160,7 @@
         });
       },
 
-      open9() {
+      open3() {
         this.$notify({
           title: '自定义位置',
           message: '左下角弹出的消息',
@@ -168,7 +168,7 @@
         });
       },
 
-      open10() {
+      open4() {
         this.$notify({
           title: '自定义位置',
           message: '左上角弹出的消息',
@@ -190,7 +190,7 @@
 <template>
   <el-button
     plain
-    @click="open11">
+    @click="open">
     偏移的消息
   </el-button>
 </template>
@@ -198,7 +198,7 @@
 <script>
   export default {
     methods: {
-      open11() {
+      open() {
         this.$notify({
           title: '偏移',
           message: '这是一条带有偏移的提示消息',
@@ -219,7 +219,7 @@
 <template>
   <el-button
     plain
-    @click="open12">
+    @click="open">
     使用 HTML 片段
   </el-button>
 </template>
@@ -227,7 +227,7 @@
 <script>
   export default {
     methods: {
-      open12() {
+      open() {
         this.$notify({
           title: 'HTML 片段',
           dangerouslyUseHTMLString: true,
@@ -253,7 +253,7 @@
 <template>
   <el-button
     plain
-    @click="open13">
+    @click="open">
     隐藏关闭按钮
   </el-button>
 </template>
@@ -261,7 +261,7 @@
 <script>
   export default {
     methods: {
-      open13() {
+      open() {
         this.$notify.success({
           title: 'Info',
           message: '这是一条没有关闭按钮的消息',
diff --git a/examples/docs/zh-CN/popover.md b/examples/docs/zh-CN/popover.md
index 7d0c2bbe2..3486b1547 100644
--- a/examples/docs/zh-CN/popover.md
+++ b/examples/docs/zh-CN/popover.md
@@ -112,11 +112,11 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 <el-popover
   placement="top"
   width="160"
-  v-model="visible2">
+  v-model="visible">
   <p>这是一段内容这是一段内容确定删除吗？</p>
   <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
-    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
+    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
+    <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
   </div>
   <el-button slot="reference">删除</el-button>
 </el-popover>
@@ -125,7 +125,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
   export default {
     data() {
       return {
-        visible2: false,
+        visible: false,
       };
     }
   }
diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md
index 0e429b216..6eaea258b 100644
--- a/examples/docs/zh-CN/select.md
+++ b/examples/docs/zh-CN/select.md
@@ -188,7 +188,7 @@
 :::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapse-tags`属性将它们合并为一段文字。
 ```html
 <template>
-  <el-select v-model="value5" multiple placeholder="请选择">
+  <el-select v-model="value1" multiple placeholder="请选择">
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -198,7 +198,7 @@
   </el-select>
 
   <el-select
-    v-model="value11"
+    v-model="value2"
     multiple
     collapse-tags
     style="margin-left: 20px;"
@@ -232,8 +232,8 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value5: [],
-        value11: []
+        value1: [],
+        value2: []
       }
     }
   }
diff --git a/examples/docs/zh-CN/switch.md b/examples/docs/zh-CN/switch.md
index 329de248b..f6476b335 100644
--- a/examples/docs/zh-CN/switch.md
+++ b/examples/docs/zh-CN/switch.md
@@ -8,11 +8,42 @@
 
 ```html
 <el-switch
-  v-model="value2"
+  v-model="value"
   active-color="#13ce66"
   inactive-color="#ff4949">
 </el-switch>
 
+<script>
+  export default {
+    data() {
+      return {
+        value: true
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 文字描述
+
+:::demo 使用`active-text`属性与`inactive-text`属性来设置开关的文字描述。
+
+```html
+<el-switch
+  v-model="value1"
+  active-text="按月付费"
+  inactive-text="按年付费">
+</el-switch>
+<el-switch
+  style="display: block"
+  v-model="value2"
+  active-color="#13ce66"
+  inactive-color="#ff4949"
+  active-text="按月付费"
+  inactive-text="按年付费">
+</el-switch>
+
 <script>
   export default {
     data() {
@@ -26,46 +57,14 @@
 ```
 :::
 
-### 文字描述
-
-:::demo 使用`active-text`属性与`inactive-text`属性来设置开关的文字描述。
-
-```html
-<el-switch
-  v-model="value3"
-  active-text="按月付费"
-  inactive-text="按年付费">
-</el-switch>
-<el-switch
-  style="display: block"
-  v-model="value4"
-  active-color="#13ce66"
-  inactive-color="#ff4949"
-  active-text="按月付费"
-  inactive-text="按年付费">
-</el-switch>
-
-<script>
-  export default {
-    data() {
-      return {
-        value3: true,
-        value4: true
-      }
-    }
-  };
-</script>
-```
-:::
-
 ### 扩展的 value 类型
 
 :::demo 设置`active-value`和`inactive-value`属性，接受`Boolean`, `String`或`Number`类型的值。
 
 ```html
-<el-tooltip :content="'Switch value: ' + value5" placement="top">
+<el-tooltip :content="'Switch value: ' + value" placement="top">
   <el-switch
-    v-model="value5"
+    v-model="value"
     active-color="#13ce66"
     inactive-color="#ff4949"
     active-value="100"
@@ -77,7 +76,7 @@
   export default {
     data() {
       return {
-        value5: '100'
+        value: '100'
       }
     }
   };
@@ -93,19 +92,19 @@
 
 ```html
 <el-switch
-  v-model="value6"
+  v-model="value1"
   disabled>
 </el-switch>
 <el-switch
-  v-model="value7"
+  v-model="value2"
   disabled>
 </el-switch>
 <script>
   export default {
     data() {
       return {
-        value6: true,
-        value7: false
+        value1: true,
+        value2: false
       }
     }
   };
diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md
index 226239a1f..6b3695338 100644
--- a/examples/docs/zh-CN/time-picker.md
+++ b/examples/docs/zh-CN/time-picker.md
@@ -9,7 +9,7 @@
 :::demo 使用 el-time-select 标签，分别通过`star`、`end`和`step`指定可选的起始时间、结束时间和步长
 ```html
 <el-time-select
-  v-model="value1"
+  v-model="value"
   :picker-options="{
     start: '08:30',
     step: '00:15',
@@ -22,7 +22,7 @@
   export default {
     data() {
       return {
-        value1: ''
+        value: ''
       };
     }
   }
@@ -38,7 +38,7 @@
 ```html
 <template>
   <el-time-picker
-    v-model="value2"
+    v-model="value1"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -46,7 +46,7 @@
   </el-time-picker>
   <el-time-picker
     arrow-control
-    v-model="value3"
+    v-model="value2"
     :picker-options="{
       selectableRange: '18:30:00 - 20:30:00'
     }"
@@ -58,8 +58,8 @@
   export default {
     data() {
       return {
-        value2: new Date(2016, 9, 10, 18, 40),
-        value3: new Date(2016, 9, 10, 18, 40)
+        value1: new Date(2016, 9, 10, 18, 40),
+        value2: new Date(2016, 9, 10, 18, 40)
       };
     }
   }
@@ -117,7 +117,7 @@
 <template>
   <el-time-picker
     is-range
-    v-model="value4"
+    v-model="value1"
     range-separator="至"
     start-placeholder="开始时间"
     end-placeholder="结束时间"
@@ -126,7 +126,7 @@
   <el-time-picker
     is-range
     arrow-control
-    v-model="value5"
+    v-model="value2"
     range-separator="至"
     start-placeholder="开始时间"
     end-placeholder="结束时间"
@@ -138,8 +138,8 @@
   export default {
     data() {
       return {
-        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
-        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
       };
     }
   }
diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md
index eb66a1c55..cb2b6a9f4 100644
--- a/examples/docs/zh-CN/tree.md
+++ b/examples/docs/zh-CN/tree.md
@@ -139,7 +139,7 @@
 ```html
 <el-tree
   :props="props"
-  :load="loadNode1"
+  :load="loadNode"
   lazy
   show-checkbox>
 </el-tree>
@@ -156,7 +156,7 @@
       };
     },
     methods: {
-      loadNode1(node, resolve) {
+      loadNode(node, resolve) {
         if (node.level === 0) {
           return resolve([{ name: 'region' }]);
         }
@@ -546,14 +546,14 @@
   :props="defaultProps"
   default-expand-all
   :filter-node-method="filterNode"
-  ref="tree2">
+  ref="tree">
 </el-tree>
 
 <script>
   export default {
     watch: {
       filterText(val) {
-        this.$refs.tree2.filter(val);
+        this.$refs.tree.filter(val);
       }
     },