diff --git a/examples/docs/en-US/tabs.md b/examples/docs/en-US/tabs.md
index 9d6bba597..7aa4c81ab 100644
--- a/examples/docs/en-US/tabs.md
+++ b/examples/docs/en-US/tabs.md
@@ -210,14 +210,14 @@ Only card type Tabs support addable & closeable.
 <div style="margin-bottom: 20px;">
   <el-button
     size="small"
-    @click="addTab(editableTabsValue2)"
+    @click="addTab(editableTabsValue)"
   >
     add tab
   </el-button>
 </div>
-<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
+<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
   <el-tab-pane
-    v-for="(item, index) in editableTabs2"
+    v-for="(item, index) in editableTabs"
     :key="item.name"
     :label="item.title"
     :name="item.name"
@@ -229,8 +229,8 @@ Only card type Tabs support addable & closeable.
   export default {
     data() {
       return {
-        editableTabsValue2: '2',
-        editableTabs2: [{
+        editableTabsValue: '2',
+        editableTabs: [{
           title: 'Tab 1',
           name: '1',
           content: 'Tab 1 content'
@@ -245,16 +245,16 @@ Only card type Tabs support addable & closeable.
     methods: {
       addTab(targetName) {
         let newTabName = ++this.tabIndex + '';
-        this.editableTabs2.push({
+        this.editableTabs.push({
           title: 'New Tab',
           name: newTabName,
           content: 'New Tab content'
         });
-        this.editableTabsValue2 = newTabName;
+        this.editableTabsValue = newTabName;
       },
       removeTab(targetName) {
-        let tabs = this.editableTabs2;
-        let activeName = this.editableTabsValue2;
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
         if (activeName === targetName) {
           tabs.forEach((tab, index) => {
             if (tab.name === targetName) {
@@ -266,8 +266,8 @@ Only card type Tabs support addable & closeable.
           });
         }
         
-        this.editableTabsValue2 = activeName;
-        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
       }
     }
   }
diff --git a/examples/docs/en-US/timeline.md b/examples/docs/en-US/timeline.md
index dfe334869..4b1bc2402 100644
--- a/examples/docs/en-US/timeline.md
+++ b/examples/docs/en-US/timeline.md
@@ -58,7 +58,7 @@ Size, color, and icons can be customized in node.
 <div class="block">
   <el-timeline>
     <el-timeline-item
-      v-for="(activity, index) in activities2"
+      v-for="(activity, index) in activities"
       :key="index"
       :icon="activity.icon"
       :type="activity.type"
@@ -74,7 +74,7 @@ Size, color, and icons can be customized in node.
   export default {
     data() {
       return {
-        activities2: [{
+        activities: [{
           content: 'Custom icon',
           timestamp: '2018-04-12 20:46',
           size: 'large',
diff --git a/examples/docs/en-US/transfer.md b/examples/docs/en-US/transfer.md
index 3a30453e2..aab721c69 100644
--- a/examples/docs/en-US/transfer.md
+++ b/examples/docs/en-US/transfer.md
@@ -5,7 +5,7 @@
 ```html
 <template>
   <el-transfer
-    v-model="value1"
+    v-model="value"
     :data="data">
   </el-transfer>
 </template>
@@ -26,7 +26,7 @@
       };
       return {
         data: generateData(),
-        value1: [1, 4]
+        value: [1, 4]
       };
     }
   };
@@ -45,15 +45,15 @@ You can search and filter data items.
     filterable
     :filter-method="filterMethod"
     filter-placeholder="State Abbreviations"
-    v-model="value2"
-    :data="data2">
+    v-model="value"
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData2 = _ => {
+      const generateData = _ => {
         const data = [];
         const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
         const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
@@ -67,8 +67,8 @@ You can search and filter data items.
         return data;
       };
       return {
-        data2: generateData2(),
-        value2: [],
+        data: generateData(),
+        value: [],
         filterMethod(query, item) {
           return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
         }
@@ -90,7 +90,7 @@ You can customize list titles, button texts, render function for data items, che
   <div style="text-align: center">
     <el-transfer
       style="text-align: left; display: inline-block"
-      v-model="value3"
+      v-model="value"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -153,7 +153,7 @@ You can customize list titles, button texts, render function for data items, che
       };
       return {
         data: generateData(),
-        value3: [1],
+        value: [1],
         value4: [1],
         renderFunc(h, option) {
           return <span>{ option.key } - { option.label }</span>;
@@ -178,19 +178,19 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
 ```html
 <template>
   <el-transfer
-    v-model="value5"
+    v-model="value"
     :props="{
       key: 'value',
       label: 'desc'
     }"
-    :data="data3">
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData3 = _ => {
+      const generateData = _ => {
         const data = [];
         for (let i = 1; i <= 15; i++) {
           data.push({
@@ -202,8 +202,8 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
         return data;
       };
       return {
-        data3: generateData3(),
-        value5: []
+        data: generateData(),
+        value: []
       };
     }
   };
diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md
index 23e680f16..fe9db38ab 100644
--- a/examples/docs/en-US/tree.md
+++ b/examples/docs/en-US/tree.md
@@ -138,7 +138,7 @@ Used for node selection.
 :::demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.
 ```html
 <el-tree
-  :props="props1"
+  :props="props"
   :load="loadNode1"
   lazy
   show-checkbox>
@@ -148,7 +148,7 @@ Used for node selection.
   export default {
     data() {
       return {
-        props1: {
+        props: {
           label: 'name',
           children: 'zones',
           isLeaf: 'leaf'
@@ -186,7 +186,7 @@ The checkbox of a node can be set as disabled.
 :::demo In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.
 ```html
 <el-tree
-  :data="data3"
+  :data="data"
   :props="defaultProps"
   show-checkbox
   @check-change="handleCheckChange">
@@ -196,7 +196,7 @@ The checkbox of a node can be set as disabled.
   export default {
     data() {
       return {
-        data3: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -242,7 +242,7 @@ Tree nodes can be initially expanded or checked
 :::demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   node-key="id"
   :default-expanded-keys="[2, 3]"
@@ -254,7 +254,7 @@ Tree nodes can be initially expanded or checked
   export default {
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -305,7 +305,7 @@ Tree nodes can be initially expanded or checked
 :::demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required.
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   default-expand-all
   node-key="id"
@@ -350,7 +350,7 @@ Tree nodes can be initially expanded or checked
 
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -405,7 +405,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
   <div class="block">
     <p>Using render-content</p>
     <el-tree
-      :data="data4"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -416,7 +416,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
   <div class="block">
     <p>Using scoped slot</p>
     <el-tree
-      :data="data5"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -483,8 +483,8 @@ The content of tree nodes can be customized, so you can add icons or buttons as
         }]
       }];
       return {
-        data4: JSON.parse(JSON.stringify(data)),
-        data5: JSON.parse(JSON.stringify(data))
+        data: JSON.parse(JSON.stringify(data)),
+        data: JSON.parse(JSON.stringify(data))
       }
     },
 
@@ -543,7 +543,7 @@ Tree nodes can be filtered
 
 <el-tree
   class="filter-tree"
-  :data="data2"
+  :data="data"
   :props="defaultProps"
   default-expand-all
   :filter-node-method="filterNode"
@@ -568,7 +568,7 @@ Tree nodes can be filtered
     data() {
       return {
         filterText: '',
-        data2: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -689,7 +689,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
 :::demo
 ```html
 <el-tree
-  :data="data6"
+  :data="data"
   node-key="id"
   default-expand-all
   @node-drag-start="handleDragStart"
@@ -707,7 +707,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
   export default {
     data() {
       return {
-        data6: [{
+        data: [{
           label: 'Level one 1',
           children: [{
             label: 'Level two 1-1',
diff --git a/examples/docs/es/tabs.md b/examples/docs/es/tabs.md
index d09ce03ab..f952ae573 100644
--- a/examples/docs/es/tabs.md
+++ b/examples/docs/es/tabs.md
@@ -210,14 +210,14 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
 <div style="margin-bottom: 20px;">
   <el-button
     size="small"
-    @click="addTab(editableTabsValue2)"
+    @click="addTab(editableTabsValue)"
   >
     add tab
   </el-button>
 </div>
-<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
+<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
   <el-tab-pane
-    v-for="(item, index) in editableTabs2"
+    v-for="(item, index) in editableTabs"
     :key="item.name"
     :label="item.title"
     :name="item.name"
@@ -229,8 +229,8 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
   export default {
     data() {
       return {
-        editableTabsValue2: '2',
-        editableTabs2: [{
+        editableTabsValue: '2',
+        editableTabs: [{
           title: 'Tab 1',
           name: '1',
           content: 'Tab 1 content'
@@ -245,16 +245,16 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
     methods: {
       addTab(targetName) {
         let newTabName = ++this.tabIndex + '';
-        this.editableTabs2.push({
+        this.editableTabs.push({
           title: 'New Tab',
           name: newTabName,
           content: 'New Tab content'
         });
-        this.editableTabsValue2 = newTabName;
+        this.editableTabsValue = newTabName;
       },
       removeTab(targetName) {
-        let tabs = this.editableTabs2;
-        let activeName = this.editableTabsValue2;
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
         if (activeName === targetName) {
           tabs.forEach((tab, index) => {
             if (tab.name === targetName) {
@@ -266,8 +266,8 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
           });
         }
         
-        this.editableTabsValue2 = activeName;
-        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
       }
     }
   }
diff --git a/examples/docs/es/timeline.md b/examples/docs/es/timeline.md
index a3dea1c89..dcd1dac1e 100644
--- a/examples/docs/es/timeline.md
+++ b/examples/docs/es/timeline.md
@@ -58,7 +58,7 @@ El tamaño, el color y los iconos se pueden personalizar en el nodo.
 <div class="block">
   <el-timeline>
     <el-timeline-item
-      v-for="(activity, index) in activities2"
+      v-for="(activity, index) in activities"
       :key="index"
       :icon="activity.icon"
       :type="activity.type"
@@ -74,7 +74,7 @@ El tamaño, el color y los iconos se pueden personalizar en el nodo.
   export default {
     data() {
       return {
-        activities2: [{
+        activities: [{
           content: 'Custom icon',
           timestamp: '2018-04-12 20:46',
           size: 'large',
diff --git a/examples/docs/es/transfer.md b/examples/docs/es/transfer.md
index 936b96c0c..679e8b679 100644
--- a/examples/docs/es/transfer.md
+++ b/examples/docs/es/transfer.md
@@ -5,7 +5,7 @@
 ```html
 <template>
   <el-transfer
-    v-model="value1"
+    v-model="value"
     :data="data">
   </el-transfer>
 </template>
@@ -26,7 +26,7 @@
       };
       return {
         data: generateData(),
-        value1: [1, 4]
+        value: [1, 4]
       };
     }
   };
@@ -45,15 +45,15 @@ Puede buscar y filtrar los items.
     filterable
     :filter-method="filterMethod"
     filter-placeholder="State Abbreviations"
-    v-model="value2"
-    :data="data2">
+    v-model="value"
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData2 = _ => {
+      const generateData = _ => {
         const data = [];
         const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
         const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
@@ -67,8 +67,8 @@ Puede buscar y filtrar los items.
         return data;
       };
       return {
-        data2: generateData2(),
-        value2: [],
+        data: generateData(),
+        value: [],
         filterMethod(query, item) {
           return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
         }
@@ -90,7 +90,7 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
   <div style="text-align: center">
     <el-transfer
       style="text-align: left; display: inline-block"
-      v-model="value3"
+      v-model="value"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -153,7 +153,7 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
       };
       return {
         data: generateData(),
-        value3: [1],
+        value: [1],
         value4: [1],
         renderFunc(h, option) {
           return <span>{ option.key } - { option.label }</span>;
@@ -179,19 +179,19 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
 ```html
 <template>
   <el-transfer
-    v-model="value5"
+    v-model="value"
     :props="{
       key: 'value',
       label: 'desc'
     }"
-    :data="data3">
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData3 = _ => {
+      const generateData = _ => {
         const data = [];
         for (let i = 1; i <= 15; i++) {
           data.push({
@@ -203,8 +203,8 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
         return data;
       };
       return {
-        data3: generateData3(),
-        value5: []
+        data: generateData(),
+        value: []
       };
     }
   };
diff --git a/examples/docs/es/tree.md b/examples/docs/es/tree.md
index eb065e5d4..123becb10 100644
--- a/examples/docs/es/tree.md
+++ b/examples/docs/es/tree.md
@@ -138,7 +138,7 @@ Usado para la selección de nodos.
 :::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.
 ```html
 <el-tree
-  :props="props1"
+  :props="props"
   :load="loadNode1"
   lazy
   show-checkbox>
@@ -148,7 +148,7 @@ Usado para la selección de nodos.
   export default {
     data() {
       return {
-        props1: {
+        props: {
           label: 'name',
           children: 'zones',
           isLeaf: 'leaf'
@@ -186,7 +186,7 @@ El checkbox de un nodo se puede poner como desactivado.
 :::demo En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.
 ```html
 <el-tree
-  :data="data3"
+  :data="data"
   :props="defaultProps"
   show-checkbox
   @check-change="handleCheckChange">
@@ -196,7 +196,7 @@ El checkbox de un nodo se puede poner como desactivado.
   export default {
     data() {
       return {
-        data3: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -242,7 +242,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
 :::demo Utilice `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   node-key="id"
   :default-expanded-keys="[2, 3]"
@@ -254,7 +254,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
   export default {
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -305,7 +305,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
 :::demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo `node-key` es necesario.
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   default-expand-all
   node-key="id"
@@ -350,7 +350,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
 
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -405,7 +405,7 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
   <div class="block">
     <p>Using render-content</p>
     <el-tree
-      :data="data4"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -416,7 +416,7 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
   <div class="block">
     <p>Using scoped slot</p>
     <el-tree
-      :data="data5"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -483,8 +483,8 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
         }]
       }];
       return {
-        data4: JSON.parse(JSON.stringify(data)),
-        data5: JSON.parse(JSON.stringify(data))
+        data: JSON.parse(JSON.stringify(data)),
+        data: JSON.parse(JSON.stringify(data))
       }
     },
 
@@ -543,7 +543,7 @@ Los nodos del árbol se pueden filtrar.
 
 <el-tree
   class="filter-tree"
-  :data="data2"
+  :data="data"
   :props="defaultProps"
   default-expand-all
   :filter-node-method="filterNode"
@@ -568,7 +568,7 @@ Los nodos del árbol se pueden filtrar.
     data() {
       return {
         filterText: '',
-        data2: [{
+        data: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -689,7 +689,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 :::demo
 ```html
 <el-tree
-  :data="data6"
+  :data="data"
   node-key="id"
   default-expand-all
   @node-drag-start="handleDragStart"
@@ -707,7 +707,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
   export default {
     data() {
       return {
-        data6: [{
+        data: [{
           label: 'Level one 1',
           children: [{
             label: 'Level two 1-1',
diff --git a/examples/docs/fr-FR/tabs.md b/examples/docs/fr-FR/tabs.md
index cd9a3f0ba..acc705930 100644
--- a/examples/docs/fr-FR/tabs.md
+++ b/examples/docs/fr-FR/tabs.md
@@ -210,14 +210,14 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
 <div style="margin-bottom: 20px;">
   <el-button
     size="small"
-    @click="addTab(editableTabsValue2)"
+    @click="addTab(editableTabsValue)"
   >
     Ajouter un onglet
   </el-button>
 </div>
-<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
+<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
   <el-tab-pane
-    v-for="(item, index) in editableTabs2"
+    v-for="(item, index) in editableTabs"
     :key="item.name"
     :label="item.title"
     :name="item.name"
@@ -229,8 +229,8 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
   export default {
     data() {
       return {
-        editableTabsValue2: '2',
-        editableTabs2: [{
+        editableTabsValue: '2',
+        editableTabs: [{
           title: 'Onglet 1',
           name: '1',
           content: 'Contenu de l\'onglet 1'
@@ -245,16 +245,16 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
     methods: {
       addTab(targetName) {
         let newTabName = ++this.tabIndex + '';
-        this.editableTabs2.push({
+        this.editableTabs.push({
           title: 'Nouvel onglet',
           name: newTabName,
           content: 'Contenu du nouvel onglet'
         });
-        this.editableTabsValue2 = newTabName;
+        this.editableTabsValue = newTabName;
       },
       removeTab(targetName) {
-        let tabs = this.editableTabs2;
-        let activeName = this.editableTabsValue2;
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
         if (activeName === targetName) {
           tabs.forEach((tab, index) => {
             if (tab.name === targetName) {
@@ -266,8 +266,8 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
           });
         }
 
-        this.editableTabsValue2 = activeName;
-        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
       }
     }
   }
diff --git a/examples/docs/fr-FR/timeline.md b/examples/docs/fr-FR/timeline.md
index 7738bf8b8..9193ea72a 100644
--- a/examples/docs/fr-FR/timeline.md
+++ b/examples/docs/fr-FR/timeline.md
@@ -58,7 +58,7 @@ Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.
 <div class="block">
   <el-timeline>
     <el-timeline-item
-      v-for="(activity, index) in activities2"
+      v-for="(activity, index) in activities"
       :key="index"
       :icon="activity.icon"
       :type="activity.type"
@@ -74,7 +74,7 @@ Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.
   export default {
     data() {
       return {
-        activities2: [{
+        activities: [{
           content: 'Icône',
           timestamp: '2018-04-12 20:46',
           size: 'large',
diff --git a/examples/docs/fr-FR/transfer.md b/examples/docs/fr-FR/transfer.md
index 387d0ad0e..913442323 100644
--- a/examples/docs/fr-FR/transfer.md
+++ b/examples/docs/fr-FR/transfer.md
@@ -7,7 +7,7 @@ Permet de transférer des options d'une liste à une autre de manière ergonomiq
 ```html
 <template>
   <el-transfer
-    v-model="value1"
+    v-model="value"
     :data="data">
   </el-transfer>
 </template>
@@ -28,7 +28,7 @@ Permet de transférer des options d'une liste à une autre de manière ergonomiq
       };
       return {
         data: generateData(),
-        value1: [1, 4]
+        value: [1, 4]
       };
     }
   };
@@ -47,15 +47,15 @@ Vous pouvez filtrer les options.
     filterable
     :filter-method="filterMethod"
     filter-placeholder="State Abbreviations"
-    v-model="value2"
-    :data="data2">
+    v-model="value"
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData2 = _ => {
+      const generateData = _ => {
         const data = [];
         const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
         const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
@@ -69,8 +69,8 @@ Vous pouvez filtrer les options.
         return data;
       };
       return {
-        data2: generateData2(),
-        value2: [],
+        data: generateData(),
+        value: [],
         filterMethod(query, item) {
           return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
         }
@@ -92,7 +92,7 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
   <div style="text-align: center">
     <el-transfer
       style="text-align: left; display: inline-block"
-      v-model="value3"
+      v-model="value"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -155,7 +155,7 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
       };
       return {
         data: generateData(),
-        value3: [1],
+        value: [1],
         value4: [1],
         renderFunc(h, option) {
           return <span>{ option.key } - { option.label }</span>;
@@ -181,19 +181,19 @@ Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos
 ```html
 <template>
   <el-transfer
-    v-model="value5"
+    v-model="value"
     :props="{
       key: 'value',
       label: 'desc'
     }"
-    :data="data3">
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData3 = _ => {
+      const generateData = _ => {
         const data = [];
         for (let i = 1; i <= 15; i++) {
           data.push({
@@ -205,8 +205,8 @@ Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos
         return data;
       };
       return {
-        data3: generateData3(),
-        value5: []
+        data: generateData(),
+        value: []
       };
     }
   };
diff --git a/examples/docs/fr-FR/tree.md b/examples/docs/fr-FR/tree.md
index 8326b6359..1bd7b7d6a 100644
--- a/examples/docs/fr-FR/tree.md
+++ b/examples/docs/fr-FR/tree.md
@@ -138,7 +138,7 @@ Vous pouvez activer la sélection des noeuds.
 :::demo Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est  une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu.
 ```html
 <el-tree
-  :props="props1"
+  :props="props"
   :load="loadNode1"
   lazy
   show-checkbox>
@@ -148,7 +148,7 @@ Vous pouvez activer la sélection des noeuds.
   export default {
     data() {
       return {
-        props1: {
+        props: {
           label: 'name',
           children: 'zones',
           isLeaf: 'leaf'
@@ -186,7 +186,7 @@ Les checkbox des noeuds peuvent être désactivées individuellement.
 :::demo Dans cet exemple, la propriété `disabled` est ajoutée à `defaultProps`, et certains noeuds ont `disabled:true`. Les checkbox correspondantes sont donc désactivées.
 ```html
 <el-tree
-  :data="data3"
+  :data="data"
   :props="defaultProps"
   show-checkbox
   @check-change="handleCheckChange">
@@ -196,7 +196,7 @@ Les checkbox des noeuds peuvent être désactivées individuellement.
   export default {
     data() {
       return {
-        data3: [{
+        data: [{
           id: 1,
           label: 'Niveau un 1',
           children: [{
@@ -243,7 +243,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
 :::demo Utilisez `default-expanded-keys` et `default-checked-keys` pour réglez respectivement les noeuds ouverts et les noeuds sélectionnés par défaut. Notez que `node-key` est requis dans ce cas. Sa valeurs est le nom d'une clé dans l'objets data, et sa valeur devrait être unique dans tout l'arbre.
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   node-key="id"
   :default-expanded-keys="[2, 3]"
@@ -255,7 +255,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
   export default {
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: 'Niveau un 1',
           children: [{
@@ -306,7 +306,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
 :::demo Cet exemple montre comment récupérer et sélectionner des noeuds. Vous pouvez utiliser deux approches: les noeuds ou les clés. Dans le cas des clés, `node-key` est requis.
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   default-expand-all
   node-key="id"
@@ -351,7 +351,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
 
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: 'Niveau un 1',
           children: [{
@@ -407,7 +407,7 @@ Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icô
   <div class="block">
     <p>Avec render-content</p>
     <el-tree
-      :data="data4"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -418,7 +418,7 @@ Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icô
   <div class="block">
     <p>Avec un slot</p>
     <el-tree
-      :data="data5"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -485,8 +485,8 @@ Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icô
         }]
       }];
       return {
-        data4: JSON.parse(JSON.stringify(data)),
-        data5: JSON.parse(JSON.stringify(data))
+        data: JSON.parse(JSON.stringify(data)),
+        data: JSON.parse(JSON.stringify(data))
       }
     },
 
@@ -546,7 +546,7 @@ Les noeuds peuvent être filtrés par mot-clé.
 
 <el-tree
   class="filter-tree"
-  :data="data2"
+  :data="data"
   :props="defaultProps"
   default-expand-all
   :filter-node-method="filterNode"
@@ -571,7 +571,7 @@ Les noeuds peuvent être filtrés par mot-clé.
     data() {
       return {
         filterText: '',
-        data2: [{
+        data: [{
           id: 1,
           label: 'Niveau un 1',
           children: [{
@@ -692,7 +692,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab
 :::demo
 ```html
 <el-tree
-  :data="data6"
+  :data="data"
   node-key="id"
   default-expand-all
   @node-drag-start="handleDragStart"
@@ -710,7 +710,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab
   export default {
     data() {
       return {
-        data6: [{
+        data: [{
           label: 'Niveau un 1',
           children: [{
             label: 'Niveau deux 1-1',
diff --git a/examples/docs/zh-CN/tabs.md b/examples/docs/zh-CN/tabs.md
index 229860578..c8f7bf90a 100644
--- a/examples/docs/zh-CN/tabs.md
+++ b/examples/docs/zh-CN/tabs.md
@@ -42,7 +42,7 @@
 
 ```html
 <template>
-  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
+  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
     <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
     <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
     <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
@@ -53,7 +53,7 @@
   export default {
     data() {
       return {
-        activeName2: 'first'
+        activeName: 'first'
       };
     },
     methods: {
@@ -208,14 +208,14 @@
 <div style="margin-bottom: 20px;">
   <el-button
     size="small"
-    @click="addTab(editableTabsValue2)"
+    @click="addTab(editableTabsValue)"
   >
     add tab
   </el-button>
 </div>
-<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
+<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
   <el-tab-pane
-    v-for="(item, index) in editableTabs2"
+    v-for="(item, index) in editableTabs"
     :key="item.name"
     :label="item.title"
     :name="item.name"
@@ -227,8 +227,8 @@
   export default {
     data() {
       return {
-        editableTabsValue2: '2',
-        editableTabs2: [{
+        editableTabsValue: '2',
+        editableTabs: [{
           title: 'Tab 1',
           name: '1',
           content: 'Tab 1 content'
@@ -243,16 +243,16 @@
     methods: {
       addTab(targetName) {
         let newTabName = ++this.tabIndex + '';
-        this.editableTabs2.push({
+        this.editableTabs.push({
           title: 'New Tab',
           name: newTabName,
           content: 'New Tab content'
         });
-        this.editableTabsValue2 = newTabName;
+        this.editableTabsValue = newTabName;
       },
       removeTab(targetName) {
-        let tabs = this.editableTabs2;
-        let activeName = this.editableTabsValue2;
+        let tabs = this.editableTabs;
+        let activeName = this.editableTabsValue;
         if (activeName === targetName) {
           tabs.forEach((tab, index) => {
             if (tab.name === targetName) {
@@ -264,8 +264,8 @@
           });
         }
         
-        this.editableTabsValue2 = activeName;
-        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
+        this.editableTabsValue = activeName;
+        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
       }
     }
   }
diff --git a/examples/docs/zh-CN/timeline.md b/examples/docs/zh-CN/timeline.md
index fb5f87792..49acd6213 100644
--- a/examples/docs/zh-CN/timeline.md
+++ b/examples/docs/zh-CN/timeline.md
@@ -58,7 +58,7 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
 <div class="block">
   <el-timeline>
     <el-timeline-item
-      v-for="(activity, index) in activities2"
+      v-for="(activity, index) in activities"
       :key="index"
       :icon="activity.icon"
       :type="activity.type"
@@ -74,7 +74,7 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
   export default {
     data() {
       return {
-        activities2: [{
+        activities: [{
           content: '支持使用图标',
           timestamp: '2018-04-12 20:46',
           size: 'large',
diff --git a/examples/docs/zh-CN/transfer.md b/examples/docs/zh-CN/transfer.md
index b7b8383fd..e10fb11e5 100644
--- a/examples/docs/zh-CN/transfer.md
+++ b/examples/docs/zh-CN/transfer.md
@@ -4,7 +4,7 @@
 :::demo Transfer 的数据通过 `data` 属性传入。数据需要是一个对象数组，每个对象有以下属性：`key` 为数据的唯一性标识，`label` 为显示文本，`disabled` 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 `v-model` 的变量，值为数据项的 `key` 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 `v-model` 绑定的变量赋予一个初始值。
 ```html
 <template>
-  <el-transfer v-model="value1" :data="data"></el-transfer>
+  <el-transfer v-model="value" :data="data"></el-transfer>
 </template>
 
 <script>
@@ -23,7 +23,7 @@
       };
       return {
         data: generateData(),
-        value1: [1, 4]
+        value: [1, 4]
       };
     }
   };
@@ -42,15 +42,15 @@
     filterable
     :filter-method="filterMethod"
     filter-placeholder="请输入城市拼音"
-    v-model="value2"
-    :data="data2">
+    v-model="value"
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData2 = _ => {
+      const generateData = _ => {
         const data = [];
         const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
         const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
@@ -64,8 +64,8 @@
         return data;
       };
       return {
-        data2: generateData2(),
-        value2: [],
+        data: generateData(),
+        value: [],
         filterMethod(query, item) {
           return item.pinyin.indexOf(query) > -1;
         }
@@ -87,7 +87,7 @@
   <div style="text-align: center">
     <el-transfer
       style="text-align: left; display: inline-block"
-      v-model="value3"
+      v-model="value"
       filterable
       :left-default-checked="[2, 3]"
       :right-default-checked="[1]"
@@ -150,7 +150,7 @@
       };
       return {
         data: generateData(),
-        value3: [1],
+        value: [1],
         value4: [1],
         renderFunc(h, option) {
           return <span>{ option.key } - { option.label }</span>;
@@ -175,19 +175,19 @@
 ```html
 <template>
   <el-transfer
-    v-model="value5"
+    v-model="value"
     :props="{
       key: 'value',
       label: 'desc'
     }"
-    :data="data3">
+    :data="data">
   </el-transfer>
 </template>
 
 <script>
   export default {
     data() {
-      const generateData3 = _ => {
+      const generateData = _ => {
         const data = [];
         for (let i = 1; i <= 15; i++) {
           data.push({
@@ -199,8 +199,8 @@
         return data;
       };
       return {
-        data3: generateData3(),
-        value5: []
+        data: generateData(),
+        value: []
       };
     }
   };
diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md
index 86be7b296..eb66a1c55 100644
--- a/examples/docs/zh-CN/tree.md
+++ b/examples/docs/zh-CN/tree.md
@@ -138,7 +138,7 @@
 :::demo 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
 ```html
 <el-tree
-  :props="props1"
+  :props="props"
   :load="loadNode1"
   lazy
   show-checkbox>
@@ -148,7 +148,7 @@
   export default {
     data() {
       return {
-        props1: {
+        props: {
           label: 'name',
           children: 'zones',
           isLeaf: 'leaf'
@@ -185,7 +185,7 @@
 :::demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   node-key="id"
   :default-expanded-keys="[2, 3]"
@@ -197,7 +197,7 @@
   export default {
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: '一级 1',
           children: [{
@@ -249,7 +249,7 @@
 :::demo 通过`disabled`设置禁用状态。
 ```html
 <el-tree
-  :data="data3"
+  :data="data"
   show-checkbox
   node-key="id"
   :default-expanded-keys="[2, 3]"
@@ -260,7 +260,7 @@
   export default {
     data() {
       return {
-        data3: [{
+        data: [{
           id: 1,
           label: '一级 2',
           children: [{
@@ -304,7 +304,7 @@
 :::demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。
 ```html
 <el-tree
-  :data="data2"
+  :data="data"
   show-checkbox
   default-expand-all
   node-key="id"
@@ -349,7 +349,7 @@
 
     data() {
       return {
-        data2: [{
+        data: [{
           id: 1,
           label: '一级 1',
           children: [{
@@ -404,7 +404,7 @@
   <div class="block">
     <p>使用 render-content</p>
     <el-tree
-      :data="data4"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -415,7 +415,7 @@
   <div class="block">
     <p>使用 scoped slot</p>
     <el-tree
-      :data="data5"
+      :data="data"
       show-checkbox
       node-key="id"
       default-expand-all
@@ -482,8 +482,8 @@
         }]
       }];
       return {
-        data4: JSON.parse(JSON.stringify(data)),
-        data5: JSON.parse(JSON.stringify(data))
+        data: JSON.parse(JSON.stringify(data)),
+        data: JSON.parse(JSON.stringify(data))
       }
     },
 
@@ -542,7 +542,7 @@
 
 <el-tree
   class="filter-tree"
-  :data="data2"
+  :data="data"
   :props="defaultProps"
   default-expand-all
   :filter-node-method="filterNode"
@@ -567,7 +567,7 @@
     data() {
       return {
         filterText: '',
-        data2: [{
+        data: [{
           id: 1,
           label: '一级 1',
           children: [{
@@ -688,7 +688,7 @@
 :::demo
 ```html
 <el-tree
-  :data="data6"
+  :data="data"
   node-key="id"
   default-expand-all
   @node-drag-start="handleDragStart"
@@ -706,7 +706,7 @@
   export default {
     data() {
       return {
-        data6: [{
+        data: [{
           id: 1,
           label: '一级 1',
           children: [{