diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 3289a0da0ec..ed616fb9e33 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,26 @@
 ## Changelog
 
+## 2.9.1
+
+*2019-05-30*
+
+#### New features
+
+- Table
+  - default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change event are supported in Tree Table (#15709 by @ziyoung)
+
+#### Bug fixes
+
+- Table
+  - Fix some bugs (#15709 by @ziyoung)
+- Theme
+  - Update api host (#15784 by @iamkun)
+
+#### Optimization
+
+- Chore
+  - Update InfiniteScroll type (#15794 by @iamkun)
+
 ### 2.9.0
 
 *2019-05-30*
diff --git a/CHANGELOG.es.md b/CHANGELOG.es.md
index c677d3e1223..16975bf7d49 100644
--- a/CHANGELOG.es.md
+++ b/CHANGELOG.es.md
@@ -1,86 +1,107 @@
 ## Changelog
 
+## 2.9.1
+
+*2019-05-30*
+
+#### Nuevas características
+
+- Table
+  - tree-props，default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change event son compatibles con Tree Table (#15709 by @ziyoung)
+
+#### Corrección de errores
+
+- Table
+  - Corrección de algunos errores (#15709 by @ziyoung)
+- Theme
+  - Actualización del host de la api (#15784 by @iamkun)
+
+#### Optimización
+
+- Tarea
+  - Una actualización del tipo InfiniteScroll (#15794 by @iamkun)
+
 ### 2.9.0
 
 *2019-05-30*
 
-#### New features
+#### Nuevas características
 
 - Backtop
-  - Add Backtop component (#15541 by @iamkun)
+  - Añadido componente Backtop (#15541 by @iamkun)
 - PageHeader
-  - Add PageHeader component (#15714 by @ziyoung)
+  - Añadido el componente PageHeader  (#15714 by @ziyoung)
 - InfiniteScroll
-  - Add InfiniteScroll directive (#15567 by @iamkun) 
+  - Añadida la directiva InfiniteScroll (#15567 by @iamkun) 
 - Cascader
-  - Add multiple mode and filter-method (#15611 by @SimonaliaChen)
+  - Agregado modo múltiple y método de filtro (#15611 by @SimonaliaChen)
 - Message
-  - Display in stack mode (#15639 by @island205)
+  - Visualización en modo stack (#15639 by @island205)
 - Tag
-  - Add prop effect (#15725 by @SimonaliaChen)
+  - Añadido prop effect  (#15725 by @SimonaliaChen)
 - Tabs
-  - Left align title when type is card (#15695 by @luckyCao)
+  - Alinea el título a la izquierda cuando el tipo es card (#15695 by @luckyCao)
 - DatePicker
-  - Support literal strings (#15525 by island205)
+  - Soporta cadenas literales (#15525 by island205)
 - Image
-  - Add support for transmit attrs and listeners (#15578 by @VanMess)
+  - Añadido soporte para transmitir attrs y listeners (#15578 by @VanMess)
 - Theme
-  - Add popup background (#15412 by @iamkun)  
-- Chore
-  - Update new 2.9.0 index page (#15682 by @iamkun)
+  - Añadido fondo al popup (#15412 by @iamkun)  
+- Tarea
+  - Actualizada la nueva página de índice 2.9.0 (#15682 by @iamkun)
 
-#### Bug fixes
+#### Corrección de errores
 
 - Table
-  - Fix sort-change behaviour when sort condition is null (#15012 by @joelxr)
+  - Corregido el comportamiento de cambio de orden cuando la condición de orden es nula (#15012 by @joelxr)
 - Image
-  - Fix ssr and object-fit compatibility (#15346 by @SimonaliaChen)
+  - Corregido ssr y compatibilidad de ajuste de objetos (#15346 by @SimonaliaChen)
 - Input
-  - Fix show-word-count style in el-form (#15359 by @lvjiaxuan) 
-  - Fix clear icon is not centered (#15354 by @YiiGuxing)
+  - Corregido estilo show-word-count en el-form (#15359 by @lvjiaxuan) 
+  - Corregido el icono de borrar que no estaba centrado (#15354 by @YiiGuxing)
 - Calendar
-  - Fix not correct day of week when the day is Sunday (#15399 by @qingdengyue)
-  - Fix October disappear bug (#15394 by @qingdengyue)
+  - Corregido día de la semana no correcto cuando el día es domingo  (#15399 by @qingdengyue)
+  - Corregido error de desaparición de octubre (#15394 by @qingdengyue)
 - Tabs
-  - Fix basic tab nested in card tab padding error (#15461 by @SimonaliaChen)
+  -  Corrección de la pestaña básica anidada en el error de relleno de la pestaña de la tarjeta (#15461 by @SimonaliaChen)
 - Tag
-  - Fix stop propagation problem (#15150 by @infjer)
+  - Corregido problema de propagación de stop (#15150 by @infjer)
 - Form
-  - Fix input-group within form-item height error (#15457 by @SimonaliaChen)
-  - Fix resetFields issue (15181 by @luckyCao)
+  - Corregido el error de grupo de entrada dentro de la altura del elemento de formulario (#15457 by @SimonaliaChen)
+  - Solucionado el problema de resetFields (15181 by @luckyCao)
 - Tooltip
-  - Fix custom tabindex not work (#15619 by @SimonaliaChen )
+  - Corregido tabindex personalizado no funcionaba (#15619 by @SimonaliaChen )
 - Link
-  - Fix link icon style class (#15752 by @iamkun)
+  - Arreglada la clase de estilo del icono de enlace (#15752 by @iamkun)
 - Select  
-  - Revert set value to null when cleared (#15447 by @iamkun)
+  - Revertir el valor establecido a nulo cuando se borra (#15447 by @iamkun)
 - Loading
-  - Fix dom not change when loading state change quickly (#15123 by @FAKER-A)
+  - Corregido dom no cambia cuando el estado de carga cambia rápidamente (#15123 by @FAKER-A)
 - Switch
-  - Label with el-switch repeating event (#15178 by @FAKER-A)
+  - Etiqueta con el evento de repetición del interruptor (#15178 by @FAKER-A)
 - Slider
-  - Fix style problem when clicking slider bar(#15561 by @luckyCao)
+  - Arreglado el problema de estilo al hacer clic en la barra deslizante (#15561 by @luckyCao)
 - Radio
-  - Fix issue 14808 (#14809 by @OverTree)
+  - Solucionado el problema 14808 (#14809 by @OverTree)
 - Form
-  - Fix resetFields issue (15181 by @luckyCao)  
-- Chore
-  - Upgrade dependencies and fix demo bug (#15324 by ziyoung)
+  - Solucionado el problema de resetFields (15181 by @luckyCao)  
+- Tarea
+  - Se actualizaron las dependencias y se corrigió el error de demostración (#15324 by ziyoung)
  - Type
-   - Fix loading type definition (#15635 by @iamkun)
-   - Fix Icon type (#15634 by @iamkun)
-   - Fix Link type definition (#15402 by @iamkun)
+   - Corregida la definición del tipo de carga (#15635 by @iamkun)
+   - Corregido tipo Icono (#15634 by @iamkun)
+   - Corregida la definición del tipo de enlace (#15402 by @iamkun)
 
-#### Optimization
+#### Optimización
 
 - Cascader
-  - Refactor (#15611 by @SimonaliaChen)
-- Chore
-  - Update make new component logic (by @iamkun)
-- Docs
-  - Rename variable in docs (#15185 by @liupl)
-  - Fix image attribute type and default value (#15423 by @haoranyu)
-  - Fix form doc bug (#15228 by @SHERlocked93)
+  - Refractorización (#15611 by @SimonaliaChen)
+- Tarea
+  - Actualización hacer nueva lógica de componentes (by @iamkun)
+- Documentación
+  - Renombrar variable en docs (#15185 by @liupl)
+  - Corregido el atributo type de imagen y el valor por defecto (#15423 by @haoranyu)
+  - Corregido error en la doc de form (#15228 by @SHERlocked93)
 
 ### 2.8.2
 
@@ -156,7 +177,7 @@
   - Arreglado el estilo del label (#14969 by @ziyoung)
   - Los FormItem requeridos muestran astericos cuando el label es auto (#15144 by @ziyoung)
 - Pagination
-  -  Arreglaod que el slot no se actualizaba (#14711 by @lucyhao)
+  -  Arreglado que el slot no se actualizaba (#14711 by @lucyhao)
 - Table
   - Arreglado un bug del load en el modo lazy (#15101 by @ziyoung)
   - Arreglado el ancho de la celda cuando colspan es mayor que 1 (#15196 by @ziyoung)
diff --git a/CHANGELOG.fr-FR.md b/CHANGELOG.fr-FR.md
index 94c99167f62..7df6bc59b10 100644
--- a/CHANGELOG.fr-FR.md
+++ b/CHANGELOG.fr-FR.md
@@ -1,5 +1,26 @@
 ## Changelog
 
+## 2.9.1
+
+*2019-05-30*
+
+#### New features
+
+- Table
+  - tree-props，default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change event are supported in Tree Table (#15709 by @ziyoung)
+
+#### Bug fixes
+
+- Table
+  - Fix some bugs (#15709 by @ziyoung)
+- Theme
+  - Update api host (#15784 by @iamkun)
+
+#### Optimization
+
+- Chore
+  - Update InfiniteScroll type (#15794 by @iamkun)
+
 ### 2.9.0
 
 *2019-05-30*
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 43bf7af237b..74133e45601 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,26 @@
 ## 更新日志
 
+### 2.9.1
+
+*2019-05-30*
+
+#### 新特性
+
+- Table
+  - Tree Table 支持 tree-props，default-expand-all，expand-row-keys 属性, toggle-row-expansion 方法，expand-change 事件 (#15709 by @ziyoung)
+
+#### Bug 修复
+
+- Table
+  - 修复了一些问题 (#15709 by @ziyoung)
+- Theme
+  - 更新接口域名 (#15784 by @iamkun)
+
+#### 优化
+
+- Chore
+  - 更新 InfiniteScroll 组件定义文件 (#15794 by @iamkun)
+
 ### 2.9.0
 
 *2019-05-30*
diff --git a/examples/components/header.vue b/examples/components/header.vue
index 7a154be8de1..31349bbf6ac 100644
--- a/examples/components/header.vue
+++ b/examples/components/header.vue
@@ -380,7 +380,7 @@
   import compoLang from '../i18n/component.json';
   import Element from 'main/index.js';
   import themeLoader from './theme/loader';
-  import { getVars } from './theme/loader/api.js';
+  import { getTestEle } from './theme/loader/api.js';
   import bus from '../bus';
   import { ACTION_USER_CONFIG_UPDATE } from './theme/constant.js';
 
@@ -425,7 +425,7 @@
       }
     },
     mounted() {
-      getVars()
+      getTestEle()
         .then(() => {
           this.$isEle = true;
           ga('send', 'event', 'DocView', 'Inner');
diff --git a/examples/components/theme/loader/api.js b/examples/components/theme/loader/api.js
index 73f61b24518..9f31d399988 100644
--- a/examples/components/theme/loader/api.js
+++ b/examples/components/theme/loader/api.js
@@ -6,7 +6,8 @@ const { version } = Element;
 const hostList = {
   local: 'http://localhost:3008/',
   alpha: 'https://ssr.alpha.elenet.me/element-theme-server/',
-  production: 'https://ssr.elenet.me/element-theme-server/'
+  production: 'https://ssr.ele.me/element-theme-server/',
+  productionEle: 'https://ssr.elenet.me/element-theme-server/'
 };
 
 const host = hostList[process.env.FAAS_ENV] || hostList.production;
@@ -15,6 +16,10 @@ export const getVars = () => {
   return get(`${host}getVariable?version=${version}`);
 };
 
+export const getTestEle = () => {
+  return get(`${hostList.productionEle}getVariable?version=${version}`);
+};
+
 export const updateVars = (data, cb) => {
   return post(`${host}updateVariable?version=${version}`, data, cb);
 };
diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md
index 52573628b53..8d1c42e5a62 100644
--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -1332,7 +1332,7 @@ When the row content is too long and you do not want to display the horizontal s
 
 ### Tree data and lazy mode
 
-:::demo You can display tree structure data. When using it, the prop `row-key` is required. Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children.
+:::demo You can display tree structure data. When row contains the `children` field, it is treated as nested data. For rendering nested data, the prop `row-key` is required。Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children. Both `children` and `hasChildren` can be configured via `tree-props`.
 
 ```html
 <template>
@@ -1340,11 +1340,12 @@ When the row content is too long and you do not want to display the horizontal s
   <el-table
     :data="tableData"
     style="width: 100%;margin-bottom: 20px;"
+    row-key="id"
     border
-    row-key="id">
+    default-expand-all>
     <el-table-column
       prop="date"
-      label="Date"
+      label="date"
       sortable
       width="180">
     </el-table-column>
@@ -1363,7 +1364,7 @@ When the row content is too long and you do not want to display the horizontal s
     border
     lazy
     :load="load"
-    >
+    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
     <el-table-column
       prop="date"
       label="Date"
@@ -1429,17 +1430,19 @@ When the row content is too long and you do not want to display the horizontal s
     },
     methods: {
       load(tree, treeNode, resolve) {
-        resolve([
-          {
-            id: 31,
-            date: '2016-05-01',
-            name: 'wangxiaohu'
-          }, {
-            id: 32,
-            date: '2016-05-01',
-            name: 'wangxiaohu'
-          }
-        ])
+        setTimeout(() => {
+          resolve([
+            {
+              id: 31,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }, {
+              id: 32,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }
+          ])
+        }, 1000)
       }
     },
   }
@@ -1825,7 +1828,7 @@ You can customize row index in `type=index` columns.
 | header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | Function({row, column, rowIndex, columnIndex})/Object | — | — |
 | row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | Function(row)/String | — | — |
 | empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
-| default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
+| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | Boolean | — | false |
 | expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | Array | — | |
 | default-sort | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
 | tooltip-effect | tooltip `effect` property | String | dark/light | | dark |
@@ -1836,7 +1839,8 @@ You can customize row index in `type=index` columns.
 | select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | Boolean | — | true |
 | indent      | horizontal indentation of tree data | Number | — | 16 |
 | lazy        | whether to lazy loading data           | Boolean| — | —  |
-| load        | method for loading child row data, only works when `lazy` is true | Function({ row, treeNode, resolve }) | — | — |
+| load        | method for loading child row data, only works when `lazy` is true | Function(row, treeNode, resolve) | — | — |
+| tree-props  | configuration for rendering nested data| Object | — | { hasChildren: 'hasChildren', children: 'children' } |
 
 ### Table Events
 | Event Name | Description | Parameters |
@@ -1857,7 +1861,7 @@ You can customize row index in `type=index` columns.
 | filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |
 | current-change | triggers when current row changes | currentRow, oldCurrentRow |
 | header-dragend | triggers after changing a column's width by dragging the column header's border | newWidth, oldWidth, column, event |
-| expand-change | triggers when user expands or collapses a row | row, expandedRows |
+| expand-change | triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | row, (expandedRows \| expanded) |
 
 ### Table Methods
 | Method | Description | Parameters |
@@ -1865,7 +1869,7 @@ You can customize row index in `type=index` columns.
 | clearSelection | used in multiple selection Table, clear user selection | — |
 | toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
 | toggleAllSelection | used in multiple selection Table, toggle the selected state of all rows | - |
-| toggleRowExpansion | used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
+| toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
 | setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
 | clearSort | clear sorting, restore data to the original order | — |
 | clearFilter | clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters | columnKeys |
diff --git a/examples/docs/es/backtop.md b/examples/docs/es/backtop.md
index faadfe35259..2c3ba8bd191 100644
--- a/examples/docs/es/backtop.md
+++ b/examples/docs/es/backtop.md
@@ -1,10 +1,10 @@
 ## Backtop
 
-A button to back to top
+Un botón para volver a la parte superior
 
-### Basic usage
+### Uso básico
 
-Scroll down to see the bottom-right button.
+Desplácese hacia abajo para ver el botón en el lado inferior derecho.
 :::demo
 
 ```html
@@ -16,9 +16,9 @@ Scroll down to see the bottom-right button.
 
 :::
 
-### Customizations
+### Personalización
 
-Display area is 40px \* 40px.
+Área de visualización de 40px \* 40px.
 :::demo
 
 ```html
@@ -44,17 +44,17 @@ Display area is 40px \* 40px.
 
 :::
 
-### Attributes
+### Atributos
 
-| Attribute         | Description                                                         | Type            | Accepted Values | Default |
+| Atributos | Descripción                                    | Tipo         | Valores aceptados | Por defecto |
 | ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
-| target            | the target to trigger scroll                                        | string          |                 |         |
-| visibility-height | the button will not show until the scroll height reaches this value | number |                 | 200     |
-| right             | right distance                                                      | number |                 | 40      |
-| bottom            | bottom distance                                                     | number |                 | 40      |
+| target            | el objetivo para activar el scroll      | string          |                 |         |
+| visibility-height | el botón no se mostrará hasta que la altura de desplazamiento alcance este valor | number |                 | 200     |
+| right             | separación desde la derecha              | number |                 | 40      |
+| bottom            | separación desde abajo                                       | number |                 | 40      |
 
-### Events
+### Eventos
 
-| Event Name | Description         | Parameters  |
-| ---------- | ------------------- | ----------- |
-| click      | triggers when click | click event |
+| Nombre del evento | Descripción             | Parámetros  |
+| ----------------- | ----------------------- | ----------- |
+| click             | se activa al hacer clic | click event |
diff --git a/examples/docs/es/badge.md b/examples/docs/es/badge.md
index 76b22acad48..8001fa0eec5 100644
--- a/examples/docs/es/badge.md
+++ b/examples/docs/es/badge.md
@@ -122,3 +122,4 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado.
 | is-dot   | si se debe mostrar un pequeño punto      | boolean        | —                 | false       |
 | hidden   | oculta el badge                    | boolean        | —                 | false       |
 | type     | tipo de botón                            | string         | primary / success / warning / danger / info | — |
+
diff --git a/examples/docs/es/breadcrumb.md b/examples/docs/es/breadcrumb.md
index 727e821762c..adf45a48f44 100644
--- a/examples/docs/es/breadcrumb.md
+++ b/examples/docs/es/breadcrumb.md
@@ -5,7 +5,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir
 ### Uso básico
 
 
-:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el caracter separador. El valor por defecto es '/'.
+:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el carácter separador. El valor por defecto es '/'.
 
 ```html
 <el-breadcrumb separator="/">
@@ -34,7 +34,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir
 ### Breadcrumb atributos
 | Atributo        | Descripción                            | Tipo   | Valores aceptados | Por defecto |
 | --------------- | -------------------------------------- | ------ | ----------------- | ----------- |
-| separator       | caracter separador                     | string | —                 | /           |
+| separator       | carácter separador                     | string | —                 | /           |
 | separator-class | nombre de la clase del icono separador | string | —                 | -           |
 
 ### Breadcrumb Item atributos
diff --git a/examples/docs/es/button.md b/examples/docs/es/button.md
index dd95f1656c1..3cc87a857f2 100644
--- a/examples/docs/es/button.md
+++ b/examples/docs/es/button.md
@@ -87,7 +87,7 @@ Botones sin borde ni fondo.
 
 Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.
 
-:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos custom.
+:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos personalizados.
 
 ```html
 <el-button type="primary" icon="el-icon-edit"></el-button>
@@ -132,7 +132,7 @@ Cuando se hace clic en un botón para descargar datos, el botón muestra un esta
 
 Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.
 
-:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` or `mini`.
+:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` o `mini`.
 
 ```html
 <el-row>
@@ -157,9 +157,10 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici
 | type        | tipo de botón                                 | string  | primary / success / warning / danger / info / text | —           |
 | plain       | determinar si es o no un botón plano          | boolean | —                                                  | false       |
 | round       | determinar si es o no un botón redondo        | boolean | —                                                  | false       |
-| circle      | determina si es un boton circular             | boolean | —                                                  | false       |
+| circle      | determina si es un botón circular             | boolean | —                                                  | false       |
 | loading     | determinar si es o no un botón de descarga    | boolean | —                                                  | false       |
 | disabled    | deshabilitar el botón                         | boolean | —                                                  | false       |
 | icon        | nombre de la clase del icono                  | string  | —                                                  | —           |
 | autofocus   | misma funcionalidad que la nativa `autofocus` | boolean | —                                                  | false       |
-| native-type | misma funcionalidad que la nativa `type`      | string  | button / submit / reset                            | button      |
\ No newline at end of file
+| native-type | misma funcionalidad que la nativa `type`      | string  | button / submit / reset                            | button      |
+
diff --git a/examples/docs/es/calendar.md b/examples/docs/es/calendar.md
index 4cbb22742ad..ce9c419e026 100644
--- a/examples/docs/es/calendar.md
+++ b/examples/docs/es/calendar.md
@@ -2,7 +2,7 @@
 
 Muestra fechas.
 
-### Basico
+### Básico
 
 :::demo Configure el valor para especificar el mes que se muestra actualmente. Si no se especifica el valor, se muestra el mes actual. el valor soporta la vinculación bidireccional.
 ```html
@@ -64,3 +64,4 @@ Muestra fechas.
 |-----------------|-------------- |---------- |---------------------- |--------- |
 | date            | fecha que la celda representa | Date      | —                     | —        |
 | data            | { type, isSelected, day}. `type` indica el mes al que pertenece la fecha, los valores opcionales son mes anterior, mes actual, mes siguiente; `isSelected` indica si la fecha está seleccionada; `day` es la fecha formateada en el formato yyyy-MM-dd | Object      | —           | —      |
+
diff --git a/examples/docs/es/card.md b/examples/docs/es/card.md
index f7b5f8a7764..05d8104fe59 100644
--- a/examples/docs/es/card.md
+++ b/examples/docs/es/card.md
@@ -1,7 +1,7 @@
 ## Card
 Muestra información dentro de un contenedor `card`
 
-### Uso Basico
+### Uso Básico
 
 `Card` incluye titulo, contenido y operaciones.
 
diff --git a/examples/docs/es/carousel.md b/examples/docs/es/carousel.md
index a715c1dc877..163ec447d9f 100644
--- a/examples/docs/es/carousel.md
+++ b/examples/docs/es/carousel.md
@@ -48,7 +48,7 @@ Presenta una serie de imágenes o textos en un espacio limitado
 
 ### Indicadores
 
-Los indicadores de paginacion pueden mostrarse fuera del carrusel
+Los indicadores de paginación pueden mostrarse fuera del carrusel
 
 :::demo El atributo  `indicator-position`  determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position`  a `outside`  los mueve hacia fuera; en cambio `indicator-position`  a `none`  los oculta.
 
@@ -184,7 +184,7 @@ Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de form
 :::
 
 ### Atributos de Carousel
-| Atributo           | Descripcion                                        | Tipo    | Valores aceptados   | Por defecto |
+| Atributo           | Descripción                                        | Tipo    | Valores aceptados   | Por defecto |
 | ------------------ | -------------------------------------------------- | ------- | ------------------- | ----------- |
 | height             | Alto del carrusel                                  | string  | —                   | —           |
 | initial-index      | Indice del slider inicial activo (empieza desde 0) | number  | —                   | 0           |
@@ -198,16 +198,16 @@ Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de form
 | direction          | direccion en la que se muestra el contenido        | string  | horizontal/vertical | horizontal  |
 
 ### Eventos de Carousel
-| Nombre evento | Descripción                              | Parametros                               |
-| ------------- | ---------------------------------------- | ---------------------------------------- |
+| Nombre evento | Descripción                               | Parámetros                                                   |
+| ------------- | ----------------------------------------- | ------------------------------------------------------------ |
 | change        | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. |
 
 ### Metodos de Carousel
-| Metodos       | Descripción                | Parametros                               |
-| ------------- | -------------------------- | ---------------------------------------- |
+| Metodos       | Descripción                | Parámetros                                                   |
+| ------------- | -------------------------- | ------------------------------------------------------------ |
 | setActiveItem | Cambio manual de slider    | indice del slider al que se va a cambiar, empezando por 0; o el `name` del `el-carousel-item` correspondiente |
-| prev          | Cambia al slider anterior  | —                                        |
-| next          | Cambia al slider siguiente | —                                        |
+| prev          | Cambia al slider anterior  | —                                                            |
+| next          | Cambia al slider siguiente | —                                                            |
 
 ### Atributos de Carousel-Item
 | Atributo | Descripción                              | Tipo   | Valores aceptados | Por defecto |
diff --git a/examples/docs/es/cascader.md b/examples/docs/es/cascader.md
index 5374df8f158..eb30f4dda90 100644
--- a/examples/docs/es/cascader.md
+++ b/examples/docs/es/cascader.md
@@ -1,12 +1,12 @@
 ## Cascader
 
-If the options have a clear hierarchical structure, Cascader can be used to view and select them.
+Si las opciones tienen una estructura jerárquica clara, se puede utilizar Cascader para verlas y seleccionarlas.
 
-### Basic usage
+### Uso básico
 
-There are two ways to expand child option items.
+Hay dos maneras de ampliar los elementos de opción hijos.
 
-:::demo Assigning the `options` attribute to an array of options renders a Cascader. The `props.expandTrigger` attribute defines how child options are expanded.
+:::demo Asignar el atributo `options` a un array de opciones genera un Cascader. El atributo `props.expandTrigger` define cómo se expanden las opciones hijo.
 ```html
 <div class="block">
   <span class="demonstration">Child options expand when clicked (default)</span>
@@ -236,11 +236,12 @@ There are two ways to expand child option items.
 ```
 :::
 
-### Disabled option
+### Opción Disabled
 
-Disable an option by setting a `disabled` field in the option object.
+Deshabilite una opción estableciendo el campo  `disabled` en las opciones del objeto.
+
+:::demo En este ejemplo, el primer ítem en el array `options` tiene un campo `disabled: true`, por lo que está deshabilitado. De forma predeterminada, Cascader comprueba el campo `disabled` en cada objeto de las opciones; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo `props.disabled` (consulte la tabla de la API a continuación para obtener más detalles). Y por supuesto, el nombre de campo `value`, `label` y `children` también se pueden personalizar de la misma manera.
 
-:::demo In this example, the first item in `options` array has a `disabled: true` field, so it is disabled. By default, Cascader checks the `disabled` field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the `props.disabled` attribute (see the API table below for details). And of course, field name `value`, `label` and `children` can also be customized in the same way.
 ```html
 <el-cascader :options="options"></el-cascader>
 
@@ -451,9 +452,9 @@ Disable an option by setting a `disabled` field in the option object.
 ```
 :::
 
-### Clearable
+### Limpiable
 
-Set `clearable` attribute for `el-cascader` and a clear icon will appear when selected and hovered
+Establezca el atributo `clearable` para `el-cascader` y aparecerá un icono de borrado cuando se seleccione y se pase el ratón por encima.
 
 :::demo
 ```html
@@ -665,11 +666,11 @@ Set `clearable` attribute for `el-cascader` and a clear icon will appear when se
 ```
 :::
 
-### Display only the last level
+### Visualizar sólo el último nivel
 
-The input can display only the last level instead of all levels.
+La entrada puede mostrar sólo el último nivel en lugar de todos los niveles.
 
-:::demo The `show-all-levels` attribute defines if all levels are displayed. If it is `false`, only the last level is displayed.
+:::demo El atributo `show-all-levels` define si se muestran todos los niveles. Si es `false`, sólo se muestra el último nivel.
 ```html
 <el-cascader :options="options" :show-all-levels="false"></el-cascader>
 <script>
@@ -878,11 +879,11 @@ The input can display only the last level instead of all levels.
 ```
 :::
 
-### Multiple Selection
+### Selección múltiple
 
-Set `props.multiple = true` to use multiple selection.
+Establezca `props.multiple = true` para usar la selección múltiple.
 
-:::demo When using multiple selection, all selected tags will display by default, You can set `collapse-tags = true` to fold selected tags.
+:::demo Cuando se utiliza la selección múltiple, todas las etiquetas seleccionadas se mostrarán de forma predeterminada, usted puede establecer `collapse-tags = true` para plegar las etiquetas seleccionadas.
 ```html
 <div class="block">
   <span class="demonstration">Display all tags (default)</span>
@@ -982,11 +983,11 @@ Set `props.multiple = true` to use multiple selection.
 :::
 
 
-### Select any level of options
+### Seleccione cualquier nivel de opciones
 
-In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.
+En la selección única, sólo se pueden comprobar los nodos de la hoja, y en la selección múltiple, los nodos padres de la comprobación conducirán a que los nodos de la hoja se comprueben con el tiempo. Cuando se activa esta función, puede hacer que los nodos padre e hijo se desacoplen y usted puede seleccionar cualquier nivel de opciones.
 
-:::demo Set `props.checkStrictly = true` to make checked state of a node not affects its parent nodes and child nodes, and then you can select any level of options.
+:::demo Establezca `props.checkStrictly = true` para que el estado comprobado de un nodo no afecte a sus nodos padre y nodos hijos, y entonces podrá seleccionar cualquier nivel de opciones.
 ```html
 <div class="block">
   <span class="demonstration">Select any level of options (Single selection)</span>
@@ -1209,11 +1210,12 @@ In single selection, only the leaf nodes can be checked, and in multiple selecti
 ```
 :::
 
-### Dynamic loading
+### Carga dinámica
+
+Carga dinámica de sus nodos hijos cuando se selecciona un nodo.
 
-Dynamic load its child nodes when checked a node.
+:::demo Establezca `lazy = true` para utilizar la carga dinámica, y deberá especificar cómo cargar la fuente de datos mediante `lazyload`. Hay dos parámetros de `lazyload`, el primer parámetro `node` es el nodo en el que se hace clic actualmente, y el `resolve` es una llamada de retorno que indica que la carga ha terminado y que debe invocarse. Para mostrar el estado del nodo con mayor precisión, puede añadir un campo `leaf` (puede ser modificado por `props.leaf`) para indicar si se trata de un nodo de hoja. De lo contrario, se deducirá verificando si tiene algún nodo hijo.
 
-:::demo Set `lazy = true` to use dynamic loading, and you have to specify how to load the data source by `lazyload`. There are two parameters of `lazyload`,the first parameter `node` is the node currently clicked, and the `resolve` is a callback that indicate loading is finished which must invoke. To display the status of node more accurately, you can add a `leaf` field (can be modified by `props.leaf`) to indicate whether it is a leaf node. Otherwise, it will be inferred by if has any child nodes.
 ```html
 <el-cascader :props="props"></el-cascader>
 
@@ -1246,11 +1248,12 @@ Dynamic load its child nodes when checked a node.
 ```
 :::
 
-### Filterable
+### Filtrable
+
+Buscar y seleccionar opciones con una palabra clave.
 
-Search and select options with a keyword.
+:::demo Añadir `filtrable` a `el-cascader` permite el filtrado. Cascader hará coincidir los nodos cuya etiqueta o etiqueta de padre (de acuerdo con `show-all-levels`) incluya una palabra clave de entrada. Por supuesto, puedes personalizar la lógica de búsqueda mediante el `filter-method` que acepta una función, el primer parámetro es `nodo`, el segundo es `keyword`, y necesitas devolver un valor booleano que indique si da en el blanco.
 
-:::demo Adding `filterable` to `el-cascader` enables filtering. Cascader will match nodes whose label or parent's label (according to `show-all-levels`) includes input keyword. Of course, you can customize search logic by `filter-method` which accepts a function, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.
 ```html
 <div class="block">
   <span class="demonstration">Filterable (Single selection)</span>
@@ -1474,11 +1477,11 @@ Search and select options with a keyword.
 ```
 :::
 
-### Custom option content
+### Contenido de opciones personalizadas
 
-You can customize the content of cascader node.
+Puede personalizar el contenido del nodo de cascada.
 
-:::demo You can customize the content of cascader node by `scoped slot`. You'll have access to `node` and `data` in the scope,  standing for the Node object and node data of the current node respectively。
+:::demo Puede personalizar el contenido del nodo del cascader mediante `scoped slot`. Tendrá acceso a `node` y `data` en el ámbito de aplicación, representando el objeto Node y los datos del nodo actual respectivamente.
 ```html
 <el-cascader :options="options">
   <template slot-scope="{ node, data }">
@@ -1693,11 +1696,11 @@ You can customize the content of cascader node.
 ```
 :::
 
-### Cascader panel
+### Panel cascader
 
-`CascaderPanel` is the core component of `Cascader` which has various of features such as single selection, multiple selection, dynamic loading and so on.
+`CascaderPanel` es el componente central de `Cascader` que tiene varias características como selección única, selección múltiple, carga dinámica, etc.
 
-:::demo Just like `el-cascader`, you can set alternative options by `options`, and enable other features by `props`, see the API form below for details.
+:::demo Al igual que `el-cascader`, puede establecer opciones alternativas mediante `options`, y habilitar otras características mediante `props`, consulte el formulario de la API a continuación para obtener más detalles.
 ```html
 <el-cascader-panel :options="options"></el-cascader-panel>
 
@@ -1907,70 +1910,70 @@ You can customize the content of cascader node.
 ```
 :::
 
-### Cascader Attributes
-| Attribute | Description | Type  | Accepted Values | Default |
+### Atributos de Cascader
+| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
 |---------- |-------- |---------- |-------------  |-------- |
-| value / v-model | binding value | - | — | — |
-| options | data of the options，the key of `value` and `label` can be customize by `Props`.| array | — | — |
-| props | configuration options, see the following table. | object | — | — |
-| size | size of input | string | medium / small / mini | — |
-| placeholder | placeholder of input | string | — | Select |
-| disabled | whether Cascader is disabled | boolean | — | false |
-| clearable | whether selected value can be cleared | boolean | — | false |
-| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
-| collapse-tags | whether to collapse tags in multiple selection mode | boolean | - | false |
-| separator | option label separator | string | — | ' / ' |
-| filterable | whether the options can be searched | boolean | — | — |
-| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | - | - |
-| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
-| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
-| popper-class | custom class name for Cascader's dropdown   | string | —  | — |
+| value / v-model | valor ligado | - | — | — |
+| options | datos de las opciones，las claves `value` y `label` pueden ser personalizadas por `Props`. | array | — | — |
+| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
+| size | tamaño del input | string | medium / small / mini | — |
+| placeholder | placeholder del input | string | — | Select |
+| disabled | si Cascader esta deshabilitada | boolean | — | false |
+| clearable | si el valor seleccionado puede ser borrado | boolean | — | false |
+| show-all-levels | si muestra todos los niveles del valor seleccionado en el input | boolean | — | true |
+| collapse-tags | si se colapsan los tags en la selección múltiple | boolean | - | false |
+| separator | separador de las etiquetas de las opciones | string | — | ' / ' |
+| filterable | si las opciones pueden ser usadas para la busqueda | boolean | — | — |
+| filter-method | lógica de búsqueda personalizable. El primer parámetro es `node`, el segundo es `keyword`, y es necesario devolver un valor boolean que indique si se ha tenido éxito. | function(node, keyword) | - | - |
+| debounce | retraso en milisegundos para el tipeo de los datos de filtro | number | — | 300 |
+| before-filter | hook antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se abortará el filtrado. | function(value) | — | — |
+| popper-class | nombre de clase personalizado para el menú desplegable de Cascader | string | —  | — |
 
-### Cascader Events
-| Event Name | Description | Parameters |
+### Eventos de Cascader
+| Nombre del evento | Descripción | Parámetros |
 |---------- |-------- |---------- |
-| change | triggers when the binding value changes | value |
-| expand-change | triggers when expand option changes | an array of the expanding node's parent nodes |
-| blur | triggers when Cascader blurs | (event: Event) |
-| focus | triggers when Cascader focuses | (event: Event) |
-| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
-| remove-tag | triggers when remove tag in multiple selection mode | the value of the tag which is removed |
+| change | se desencadena cuando cambia el valor ligado. | valor |
+| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
+| blur | se desencadena cuando Cascader se desenfoca | (event: Event) |
+| focus | se activa cuando Cascader se enfoca | (event: Event) |
+| visible-change | se activa cuando aparece/desaparece el menú desplegable | verdadero cuando aparece, y falso de otra manera |
+| remove-tag | se activa cuando se quita la etiqueta en modo de selección múltiple | el valor de la etiqueta que se quita |
 
-### Cascader Slots
-| Slot Name | Description |
+### Slots de Cascader
+| Nombre del slot | Descripción |
 |---------|-------------|
-| - | the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively. |
-| empty  | content when there is no matched options. |
+| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
+| empty  | cuando no hay opciones coincidentes. |
 
-### CascaderPanel Attributes
-| Attribute | Description | Type  | Accepted Values | Default |
+### Atributos del CascaderPanel
+| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
 |---------- |-------- |---------- |-------------  |-------- |
-| value / v-model | binding value | - | — | — |
-| options | data of the options，the key of `value` and `label` can be customize by `Props`.| array | — | — |
-| props | configuration options, see the following table. | object | — | — |
+| value / v-model | valor ligado | - | — | — |
+| options | datos de las opciones，las claves `value` y `label` pueden ser personalizadas por `Props`. | array | — | — |
+| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
 
-### CascaderPanel Events
-| Event Name | Description | Parameters |
+### Eventos de CascaderPanel
+| Nombre de los evetos | Descripción | Parámetros |
 |---------- |-------- |---------- |
-| change | triggers when the binding value changes | value |
-| expand-change | triggers when expand option changes | an array of the expanding node's parent nodes |
+| change | se desencadena cuando cambia el valor ligado.         | valor |
+| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
 
-### CascaderPanel Slots
-| Slot Name | Description |
+### Slots de CascaderPanel
+| Nombre del slot | Descripción |
 |---------|-------------|
-| - | the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively. |
+| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
 
 ### Props
-| Attribute | Description | Type  | Accepted Values | Default |
+| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
 | -------- | ----------------- | ------ | ------ | ------ |
-| expandTrigger | trigger mode of expanding options | string | click / hover | 'click' |
-| multiple | whether multiple selection is enabled | boolean | - | false |
-| checkStrictly | whether checked state of a node not affects its parent and child nodes | boolean | - | false |
-| emitPath | when checked nodes change, whether to emit an array of node's path, if false, only emit the value of node. | boolean | - | true |
-| lazy | whether to dynamic load child nodes, use with `lazyload` attribute | boolean | - | false |
-| lazyLoad | method for loading child nodes data, only works when `lazy` is true | function(node, resolve) | - | - |
-| value    | specify which key of node object is used as the node's value | string | — | 'value' |
-| label    | specify which key of node object is used as the node's label | string | — | 'label' |
-| children | specify which key of node object is used as the node's children | string | — | 'children' |
-| disabled | specify which key of node object is used as the node's disabled | string | — | 'disabled' |
-| leaf     | specify which key of node object is used as the node's leaf field | string | — | 'leaf' |
+| expandTrigger | modo de disparo de las opciones de ampliación | string | click / hover | 'click' |
+| multiple | si la selección múltiple esta activada | boolean | - | false |
+| checkStrictly | si el estado verificado de un nodo no afecta a sus nodos padre e hijo | boolean | - | false |
+| emitPath | cuando los nodos marcados cambian, si emitir o no un array de la ruta de un nodo, si es falso, sólo emite el valor del nodo. | boolean | - | true |
+| lazy | si se deben cargar dinámicamente nodos hijo, usarlo con el atributo `lazyload`. | boolean | - | false |
+| lazyLoad | para cargar datos de nodos hijo, sólo funciona cuando `lazy` es verdadero | function(node, resolve) | - | - |
+| value    | especificar qué clave de objeto de nodo se utiliza como valor del nodo | string | — | 'value' |
+| label    | especificar qué clave de objeto de nodo se utiliza como etiqueta del nodo | string | — | 'label' |
+| children | especificar qué clave de objeto de nodo se utiliza como hijo del nodo | string | — | 'children' |
+| disabled | especificar qué clave de objeto de nodo se utiliza como nodo desactivado | string | — | 'disabled' |
+| leaf     | especificar qué clave de objeto de nodo se utiliza como campo de hoja del nodo | string | — | 'leaf' |
diff --git a/examples/docs/es/checkbox.md b/examples/docs/es/checkbox.md
index 0fc180b5b4b..7d9aea3bf9f 100644
--- a/examples/docs/es/checkbox.md
+++ b/examples/docs/es/checkbox.md
@@ -51,9 +51,9 @@ Estado deshabilitado para el checkbox.
 
 ### Grupo de Checkboxes
 
-Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
+Es usado por múltiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
 
-:::demo El elemento `checkbox-group` puede manejar multiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.
+:::demo El elemento `checkbox-group` puede manejar múltiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.
 
 ```html
 <template>
@@ -248,7 +248,7 @@ Checkbox con estilo tipo Botón.
 | disabled      | especifica si el Checkbox está deshabilitado | boolean                   | —                     | false       |
 | border        | especifica si agrega un borde alrededor del Checkbox | boolean                   | —                     | false       |
 | size          | tamaño del Checkbox, sólo funciona si `border` es true | string                    | medium / small / mini | —           |
-| name          | atributo 'name' nativo                   | string                    | —                     | —           |
+| name          | atributo `name` nativo                 | string                    | —                     | —           |
 | checked       | especifica si el Checkbox está marcado   | boolean                   | —                     | false       |
 | indeterminate | similar a `indeterminate` en el checkbox nativo | boolean                   | —                     | false       |
 
diff --git a/examples/docs/es/color-picker.md b/examples/docs/es/color-picker.md
index 98591276ffb..ac3c199b33d 100644
--- a/examples/docs/es/color-picker.md
+++ b/examples/docs/es/color-picker.md
@@ -30,7 +30,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 
 ### Alpha
 
-:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo `show-alpha`.
+:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agregue el atributo `show-alpha`.
 ```html
 <el-color-picker v-model="color" show-alpha></el-color-picker>
 
@@ -46,9 +46,9 @@ ColorPicker es un selector de color que soporta varios formatos de color.
 ```
 :::
 
-### Predefined colors
+### Colores predefinidos
 
-:::demo ColorPicker supports predefined color options
+:::demo ColorPicker soporta opciones de color predefinidas
 ```html
 <el-color-picker
   v-model="color"
diff --git a/examples/docs/es/color.md b/examples/docs/es/color.md
index 78fc0af5a60..aa5efde362b 100644
--- a/examples/docs/es/color.md
+++ b/examples/docs/es/color.md
@@ -197,7 +197,7 @@ Además del color principal, se necesitan utilizar distintos colores para difere
 
 ### Color neutro
 
-Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.
+Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jerárquica.
 
 <el-row :gutter="12">
   <el-col :span="6" :xs="{span: 12}">
diff --git a/examples/docs/es/container.md b/examples/docs/es/container.md
index 1b84f3e8a29..1d7c1832b5b 100644
--- a/examples/docs/es/container.md
+++ b/examples/docs/es/container.md
@@ -13,7 +13,7 @@ De lo contrario, de forma horizontal.
 `<el-footer>`: Contenedor para pie de página.
 
 :::tip
-Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de `<el-container>` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
+Estos componentes utilizan flex para el diseño, así que asegúrese que el navegador lo soporta. Además, los elementos directos de `<el-container>` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
 :::
 
 ### Diseños comunes
diff --git a/examples/docs/es/custom-theme.md b/examples/docs/es/custom-theme.md
index a99858cf1d1..b382440e521 100644
--- a/examples/docs/es/custom-theme.md
+++ b/examples/docs/es/custom-theme.md
@@ -34,7 +34,7 @@ Vue.use(Element)
 ```
 
 :::tip
-Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
+Nota es necesario sobrescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
 :::
 
 ### CLI para generar temas
@@ -56,7 +56,7 @@ npm i https://github.com/ElementUI/theme-chalk -D
 ```
 
 #### <strong>Inicializar archivo de variables</strong>
-Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilize `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.
+Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilice `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.
 
 ```shell
 et -i [custom output file]
diff --git a/examples/docs/es/date-picker.md b/examples/docs/es/date-picker.md
index a87af0d17bb..11d288f6dfa 100644
--- a/examples/docs/es/date-picker.md
+++ b/examples/docs/es/date-picker.md
@@ -346,7 +346,7 @@ Preste atención a la capitalización
 | `A`         | AM/PM        | solamente para `format`, mayusculas      | AM            |
 | `a`         | am/pm        | solamente para `format`, minúsculas      | am            |
 | `timestamp` | JS timestamp | solamente para `value-format`; valor vinculado debe ser un `number` | 1483326245000 |
-| `[MM]` | No escape characters | To escape characters, wrap them in square brackets (e.g. [A] [MM]) | MM |
+| `[MM]` | No hay caracteres de escape | Para escapar de los caracteres, colóquelos entre corchetes (ejemplo: [A] [MM]). | MM |
 
 :::demo
 ```html
@@ -439,7 +439,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 | disabled          | si DatePicker esta deshabilitado         | boolean           | —                                        | false                |
 | size              | tamaño del input                         | string            | large/small/mini                         | —                    |
 | editable          | si el input es editable                  | boolean           | —                                        | true                 |
-| clearable         | si se muestra el boton de borrado        | boolean           | —                                        | true                 |
+| clearable         | si se muestra el botón de borrado   | boolean           | —                                        | true                 |
 | placeholder       | placeholder cuando el modo NO es rango   | string            | —                                        | —                    |
 | start-placeholder | placeholder para la fecha de inicio en modo rango | string            | —                                        | —                    |
 | end-placeholder   | placeholder para la fecha final en modo rango | string            | —                                        | —                    |
@@ -458,11 +458,11 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 | clear-icon        | Clase personalizada para el icono `clear` | string            | —                                        | el-icon-circle-close |
 
 ### Opciones del Picker
-| Atributo       | Descripción                              | Tipo                           | Valores aceptados | Por defecto |
-| -------------- | ---------------------------------------- | ------------------------------ | ----------------- | ----------- |
+| Atributo       | Descripción                                                  | Tipo                           | Valores aceptados | Por defecto |
+| -------------- | ------------------------------------------------------------ | ------------------------------ | ----------------- | ----------- |
 | shortcuts      | { text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente | object[]                       | —                 | —           |
 | disabledDate   | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function                       | —                 | —           |
-| firstDayOfWeek | primer dia de la semana                  | Number                         | 1 to 7            | 7           |
+| firstDayOfWeek | primer día de la semana                                      | Number                         | 1 to 7            | 7           |
 | onPick         | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | -                 | -           |
 
 ### Accesso directo
diff --git a/examples/docs/es/datetime-picker.md b/examples/docs/es/datetime-picker.md
index 105ac113d82..5b12dea3337 100644
--- a/examples/docs/es/datetime-picker.md
+++ b/examples/docs/es/datetime-picker.md
@@ -224,10 +224,10 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
 | firstDayOfWeek | primera día de semana                    | Número   | 1 to 7            | 7           |
 
 ### Accesos directos
-| Atributo | Descripción                              | Tipo     | Valores aceptados | Por defecto |
-| -------- | ---------------------------------------- | -------- | ----------------- | ----------- |
-| text     | título del acceso directo                | string   | —                 | —           |
-| onClick  | la funcion se dispara cuando se hace clic en el acceso directo, con el `vm` como parámetro. Puede modificar el valor del picker emitiendo el evento`pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | —                 | —           |
+| Atributo | Descripción                                                  | Tipo     | Valores aceptados | Por defecto |
+| -------- | ------------------------------------------------------------ | -------- | ----------------- | ----------- |
+| text     | título del acceso directo                                    | string   | —                 | —           |
+| onClick  | la función se dispara cuando se hace clic en el acceso directo, con el `vm` como parámetro. Puede modificar el valor del picker emitiendo el evento`pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | —                 | —           |
 
 ### Eventos
 | Nombre de evento | Descripción                              | Parámetros                    |
diff --git a/examples/docs/es/dialog.md b/examples/docs/es/dialog.md
index 692b3bf145f..6c3ce7c256d 100644
--- a/examples/docs/es/dialog.md
+++ b/examples/docs/es/dialog.md
@@ -242,7 +242,7 @@ Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no pu
 | Nombre de Evento | Descripcíon                              | Parámetros |
 | ---------------- | ---------------------------------------- | ---------- |
 | open             | se activa cuando se abre el cuadro de Diálogo | —          |
-| opened           | se activa cuando la animacion de apertura del Dialog termina. | — |
+| opened           | se activa cuando la animación de apertura del Dialog termina. | — |
 | close            | se dispara cuando el Diálogo se cierra   | —          |
 | closed           | se activa cuando finaliza la animación de cierre del Diálog | — |
 
diff --git a/examples/docs/es/form.md b/examples/docs/es/form.md
index 1a8b2b9f685..d98729a22b1 100644
--- a/examples/docs/es/form.md
+++ b/examples/docs/es/form.md
@@ -6,7 +6,7 @@ Form consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formu
 
 Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox`.
 
-:::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del item.
+:::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del ítem.
 
 ```html
 <el-form ref="form" :model="form" label-width="120px">
@@ -389,7 +389,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
 :::
 
 :::tip
-Custom validate callback function must be called. See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).
+Se debe llamar a la función de validación de llamada de retorno personalizada. Ver uso más avanzado en [async-validator](https://github.com/yiminghe/async-validator).
 :::
 
 ### Eliminar o agregar validaciones dinamicamente
@@ -473,7 +473,7 @@ Custom validate callback function must be called. See more advanced usage at [as
 
 ### Validación numerica
 
-:::demo La validacion numerica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
+:::demo La validación numérica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
 
 ```html
 <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
@@ -606,42 +606,42 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 | model                   | Datos del componente                     | object  | —                     | —           |
 | rules                   | Reglas de validación                     | object  | —                     | —           |
 | inline                  | Si el form es inline                     | boolean | —                     | false       |
-| label-position          | Posicion de la etiqueta                  | string  | left / right / top    | right       |
-| label-width             | width of label, e.g. '50px'. All its direct child form items will inherit this value. Width `auto` is supported.        | string | — | — |
+| label-position          | Posición de la etiqueta          | string  | left / right / top    | right       |
+| label-width             | anchura de la etiqueta, por ejemplo, "50px". Todos sus elementos de formulario hijo directo heredarán este valor. El valor `auto` está soportado. | string | — | — |
 | label-suffix            | sufijo de la etiqueta                    | string  | —                     | —           |
 | hide-required-asterisk       | si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas | boolean | — | false |
 | show-message            | si mostrar o no el mensaje de error      | boolean | —                     | true        |
 | inline-message          | si desea visualizar el mensaje de error inline con la posición del form item | boolean | —                     | false       |
 | status-icon             | si desea visualizar un icono que indique el resultado de la validación | boolean | —                     | false       |
-| validate-on-rule-change | si se dispara la validacion cuando el prop `rules` cambia | boolean | —                     | true        |
+| validate-on-rule-change | si se dispara la validación cuando el prop `rules` cambia | boolean | —                     | true        |
 | size                    | el tamaño de los componentes en este form | string  | medium / small / mini | —           |
 | disabled                | si se desactivan todos los componentes del formulario. Si esta en `true` no puede ser cambiado por el prop `disabled` individual de los componentes. | boolean | —                     | false       |
 
 ### Form Metodos
 
-| Metodo        | Descripción                                                                                                                                                                                                                                                                                          | Parametros                                                       |
-| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| validate      | el método para validar todo el formulario. Recibe una llamada como parametro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object))                    |
-| validateField | validar uno o varios elementos de formulario | Function(props: string \| array, callback: Function(errorMessage: string)) |
-| resetFields   | restablece todos los campos y elimina el resultado de validación                                                                                                                                                                                                                                     | —                                                                |
-| clearValidate | borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos.                                                                                  | Function(props: string \| array) |
+| Metodo        | Descripción                                                  | Parametros                                                   |
+| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| validate      | el método para validar todo el formulario. Recibe una llamada como parámetro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object))                |
+| validateField | validar uno o varios elementos de formulario                 | Function(props: string \| array, callback: Function(errorMessage: string)) |
+| resetFields   | restablece todos los campos y elimina el resultado de validación | —                                                            |
+| clearValidate | borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos. | Function(props: string \| array)                             |
 
 
 ### Form Events
 
 | Nombre   | Descripción                                          | Parametros                                                   |
 | -------- | ---------------------------------------------------- | ------------------------------------------------------------ |
-| validate | se dispara después de validar un item del formulario | la propiedad (`prop name`) nombre del item del form que se esta validando, si la validacion paso o no, y el mensaje de error si existe. |
+| validate | se dispara después de validar un ítem del formulario | la propiedad (`prop name`) nombre del ítem del form que se esta validando, si la validación paso o no, y el mensaje de error si existe. |
 
 ### Form-Item Atributos
 
 | Atributo       | Descripción                                                  | Tipo    | Valores aceptados                           | Por defecto |
 | -------------- | ------------------------------------------------------------ | ------- | ------------------------------------------- | ----------- |
-| prop           | un clave del modelo. En el uso del método validate and resetFields, el atributo es obligatorio. | string  | Clave del modelo que se ha pasado a  `form` |             |
+| prop           | un clave del modelo. En el uso del método `validate` y `resetFields`, el atributo es obligatorio. | string  | Clave del modelo que se ha pasado a  `form` |             |
 | label          | etiqueta                                                     | string  | —                                           | —           |
-| label-width    | ancho de la etiqueta, e.g. '50px'. Width `auto` is supported | string  | —                                           | —           |
+| label-width    | ancho de la etiqueta, Ejemplo: '50px'. El valor `auto` esta soportado | string  | —                                           | —           |
 | required       | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean | —                                           | false       |
-| rules          | reglas de validacion del form                                | object  | —                                           | —           |
+| rules          | reglas de validación del form                                | object  | —                                           | —           |
 | error          | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string  | —                                           | —           |
 | show-message   | si mostrar o no el mensaje de error                          | boolean | —                                           | true        |
 | inline-message | mensaje de validación estilo inline                          | boolean | —                                           | false       |
@@ -656,13 +656,13 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
 
 ### Form-Item Scoped Slot
 
-| Name  | Description                                                                                        |
-| ----- | -------------------------------------------------------------------------------------------------- |
-| error | Contenido personalizado para mostrar el mensaje de validacion. El parametro del scope es { error } |
+| Name  | Description                                                  |
+| ----- | ------------------------------------------------------------ |
+| error | Contenido personalizado para mostrar el mensaje de validación. El parámetro del scope es { error } |
 
 ### Form-Item Metodo
 
 | Metodo        | Descripción                                                 | Parametros |
 | ------------- | ----------------------------------------------------------- | ---------- |
 | resetField    | restablecer campo actual y eliminar resultado de validación | —          |
-| clearValidate | elimina el estado de la validacion de un campo              | -          |
+| clearValidate | elimina el estado de la validación de un campo              | -          |
diff --git a/examples/docs/es/i18n.md b/examples/docs/es/i18n.md
index 0a222306cb3..9fa25727a0b 100644
--- a/examples/docs/es/i18n.md
+++ b/examples/docs/es/i18n.md
@@ -39,7 +39,7 @@ webpack.config.js
 
 ## Compatible con `vue-i18n@5.x`
 
-Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilingüe.
+Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilenguaje.
 
 ```javascript
 import Vue from 'vue'
diff --git a/examples/docs/es/image.md b/examples/docs/es/image.md
index db5165176a2..85dbe6c4bed 100644
--- a/examples/docs/es/image.md
+++ b/examples/docs/es/image.md
@@ -62,7 +62,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca
 
 ### Fallo de carga
 
-:::demo Personalice el contenido cuando ocurra algun error al cargar la imagen via `slot = error`
+:::demo Personalice el contenido cuando ocurra algún error al cargar la imagen vía `slot = error`
 ```html
 <div class="demo-image__error">
   <div class="block">
@@ -114,7 +114,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca
 | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
 |---------- |-------- |---------- |-------------  |-------- |
 | src | origen de la imagen, igual que en nativo | string | — | - |
-| fit | Indica como la imagen debe adaptarse al contenendor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
+| fit | Indica como la imagen debe adaptarse al contenedor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
 | alt | alt nativo | string | - | - |
 | referrer-policy | referrerPolicy nativo | string | - | - |
 | lazy | si se usara lazy load | boolean | — | false |
diff --git a/examples/docs/es/infiniteScroll.md b/examples/docs/es/infiniteScroll.md
index d61ea96ddb0..97d763ac39e 100644
--- a/examples/docs/es/infiniteScroll.md
+++ b/examples/docs/es/infiniteScroll.md
@@ -1,10 +1,11 @@
 ## InfiniteScroll
 
-Load more data while reach bottom of the page
+Cargar más datos mientras se llega al final de la página
 
-### Basic usage
-Add `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom.
+### Uso básico
+Añada `v-infinite-scroll` a la lista para ejecutar automáticamente el método de carga cuando se desplace hacia abajo.
 :::demo
+
 ```html
 <template>
   <ul class="infinite-list" v-infinite-scroll="load">
@@ -29,7 +30,7 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
 ```
 :::
 
-### Disable Loading
+### Deshabilite Loading
 
 :::demo
 ```html
@@ -77,11 +78,11 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
 :::
 
 
-### Attributes
+### Atributos
 
-| Attribute | Description | Type  | Accepted values | Default   |
+| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
 | -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
-| infinite-scroll-disabled | is disabled           | boolean      | - |false |
-| infinite-scroll-delay   | throttle delay (ms)   | number       |   - |200   |
-| infinite-scroll-distance| trigger distance (px) | number   |- |0 |
-| infinite-scroll-immediate |Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state. | boolean | - |true |
+| infinite-scroll-disabled | si esta disabled | boolean      | - |false |
+| infinite-scroll-delay   | retraso en milisegundos | number       |   - |200   |
+| infinite-scroll-distance| distancia de activación (px) | number   |- |0 |
+| infinite-scroll-immediate |Si se debe ejecutar el método de carga inmediatamente, en caso de que el contenido no se pueda rellenar en el estado inicial. | boolean | - |true |
diff --git a/examples/docs/es/input.md b/examples/docs/es/input.md
index 3a021179884..725ae2274e3 100644
--- a/examples/docs/es/input.md
+++ b/examples/docs/es/input.md
@@ -155,7 +155,7 @@ export default {
 
 ### Textarea
 
-Redimensiona para introducir varias líneas de información de texto. Agrege el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
+Redimensiona para introducir varias líneas de información de texto. Agregue el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
 
 :::demo Controle la altura ajustando el prop `rows`.
 
@@ -180,9 +180,9 @@ export default {
 
 :::
 
-### Textarea tamaño automatico
+### Textarea tamaño automático
 
-El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.
+El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para auto dimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.
 
 :::demo
 
@@ -579,18 +579,18 @@ export default {
 | value / v-model | valor enlazado                          | boolean / string / number | —                       | —           |
 | maxlength     | igual que `maxlength` en el input nativo                                                                                                         | number           | —                                                                                                                                       | —           |
 | minlength     | igual que `minlength` en el input nativo                                                                                                         | number           | —                                                                                                                                       | —           |
-| show-word-limit | Si se muesta el contador de palabras, solamente funciona con los tipos 'text' o 'textarea' | boolean    |  —  | false |
+| show-word-limit | Si se muestra el contador de palabras, solamente funciona con los tipos `text` o `textarea` | boolean    |  —  | false |
 | placeholder   | placeholder del Input                                                                                                                            | string           | —                                                                                                                                       | —           |
-| clearable | si debe mostrar el boton de limpieza | boolean | — | false |
-| show-password | si debe mostrar la posibilidad de conmutacion de password input | boolean         | — | false |
+| clearable | si debe mostrar el botón de limpieza | boolean | — | false |
+| show-password | si debe mostrar la posibilidad de conmutación de password input | boolean         | — | false |
 | disabled      | si esta deshabilitado                                                                                                                            | boolean          | —                                                                                                                                       | false       |
 | size          | tamaño del input, esto no funciona cuando `type` no es textarea                                                                                  | string           | medium / small / mini                                                                                                                   | —           |
 | prefix-icon   | clase del icono de prefijo                                                                                                                       | string           | —                                                                                                                                       | —           |
 | suffix-icon   | clase del icono de sufijo                                                                                                                        | string           | —                                                                                                                                       | —           |
-| rows          | número de filas, sólo funciona cuando `type` es 'textarea'.                                                                                      | number           | —                                                                                                                                       | 2           |
-| autosize      | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | —                                                                                                                                       | false       |
+| rows          | número de filas, sólo funciona cuando `type` es `textarea`.                                                                                    | number           | —                                                                                                                                       | 2           |
+| autosize      | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es `textarea`. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | —                                                                                                                                       | false       |
 | autocomplete  | igual que `autocomplete` en el input nativo                                                                                                      | string           | on/off                                                                                                                                  | off         |
-| auto-complete | @DEPRECATED en el proximo cambio mayor de version                                                                                                | string           | on/off                                                                                                                                  | off         |
+| auto-complete | @DEPRECATED en el próximo cambio mayor de versión                                                                                  | string           | on/off                                                                                                                                  | off         |
 | name          | igual que `name` en el input nativo                                                                                                              | string           | —                                                                                                                                       | —           |
 | readonly      | igual que `readonly` en el input nativo                                                                                                          | boolean          | —                                                                                                                                       | false       |
 | max           | igual que `max` en el input nativo                                                                                                               | —                | —                                                                                                                                       | —           |
@@ -600,7 +600,7 @@ export default {
 | autofocus     | igual que `autofocus` en el input nativo                                                                                                         | boolean          | —                                                                                                                                       | false       |
 | form          | igual que `form` en el input nativo                                                                                                              | string           | —                                                                                                                                       | —           |
 | label         | texto de la etiqueta                                                                                                                             | string           | —                                                                                                                                       | —           |
-| tabindex      | orden de tabulacion para el Input                                                                                                                | string           | -                                                                                                                                       | -           |
+| tabindex      | orden de tabulación para el Input                                                                                                               | string           | -                                                                                                                                       | -           |
 
 ### Input slots
 
@@ -613,12 +613,12 @@ export default {
 
 ### Input eventos
 
-| Nombre | Descripción                                                                                | Parametros                |
-| ------ | ------------------------------------------------------------------------------------------ | ------------------------- |
-| blur   | Se dispara cuando se pierde el foco                                                        | (event: Event)            |
-| focus  | Se dispara cuando se obtiene el foco                                                       | (event: Event)            |
-| change | se activa cuando cambia el valor de entrada                                                | (value: string \| number) |
-| clear  | se dispara cuando la entrada es borrada por el botón generado por el atributo "clearable". | —                         |
+| Nombre | Descripción                                                  | Parametros                |
+| ------ | ------------------------------------------------------------ | ------------------------- |
+| blur   | Se dispara cuando se pierde el foco                          | (event: Event)            |
+| focus  | Se dispara cuando se obtiene el foco                         | (event: Event)            |
+| change | se activa cuando cambia el valor de entrada                  | (value: string \| number) |
+| clear  | se dispara cuando la entrada es borrada por el botón generado por el atributo `clearable`. | —                         |
 
 ### Input Metodo
 
@@ -663,15 +663,15 @@ export default {
 
 ### Autocomplete Scoped Slot
 
-| Name | Description                                                                              |
-| ---- | ---------------------------------------------------------------------------------------- |
-| —    | Contenido personalizado para el input de sugerencias. El parametro del scope es { item } |
+| Name | Description                                                  |
+| ---- | ------------------------------------------------------------ |
+| —    | Contenido personalizado para el input de sugerencias. El parámetro del scope es { ítem } |
 
 ### Autocomplete Eventos
 
-| Nombre | Descripción                                      | Parametros                                  |
-| ------ | ------------------------------------------------ | ------------------------------------------- |
-| select | se dispara cuando se hace click a una sugerencia | sugerencia en la que se está haciendo click |
+| Nombre | Descripción                                     | Parametros                                 |
+| ------ | ----------------------------------------------- | ------------------------------------------ |
+| select | se dispara cuando se hace clic a una sugerencia | sugerencia en la que se está haciendo clic |
 
 ### Autocomplete Metodo
 
diff --git a/examples/docs/es/installation.md b/examples/docs/es/installation.md
index 2503fd6df01..efbdb559c46 100644
--- a/examples/docs/es/installation.md
+++ b/examples/docs/es/installation.md
@@ -2,7 +2,7 @@
 
 ### npm
 
-Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/).
+Instalar mediante npm es la forma recomendada ya que se integra fácilmente con [webpack](https://webpack.js.org/).
 
 ```shell
 npm i element-ui -S
@@ -31,4 +31,4 @@ Si esta usando un CDN, una página con Hello-World es fácil con Element. [Onlin
   (<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
 </iframe>
 
-Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: [Quick Start](/#/es/component/quickstart)
+Si esta usando npm y desea combinarlo con webpack, por favor continué a la siguiente página: [Quick Start](/#/es/component/quickstart)
diff --git a/examples/docs/es/loading.md b/examples/docs/es/loading.md
index 320972ef634..36bb660d53b 100644
--- a/examples/docs/es/loading.md
+++ b/examples/docs/es/loading.md
@@ -66,7 +66,7 @@ Muestra una animación en un contenedor (como en una tabla) mientras se cargan l
 
 Puede personalizar el texto de carga, spinner de carga y color de fondo.
 
-:::demo Agrege el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.
+:::demo Agregue el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.
 ```html
 <template>
   <el-table
diff --git a/examples/docs/es/menu.md b/examples/docs/es/menu.md
index 8abfa627fd2..bc4aca0a9e5 100644
--- a/examples/docs/es/menu.md
+++ b/examples/docs/es/menu.md
@@ -256,7 +256,7 @@ NavMenu vertical puede ser colapsado.
 | default-openeds   | arreglo que contiene las llaves del sub-menus activo | Array   | —                     | —           |
 | unique-opened     | si solo un submenu puede ser activo      | boolean | —                     | false       |
 | menu-trigger      | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string  | hover / click      | hover   |
-| router            | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean | —                     | false       |
+| router            | si el modo `vue-router` está activado. Si es verdadero, el índice será usado como 'path' para activar la ruta | boolean | —                     | false       |
 | collapse-transition  | si se debe permitir collapse transition | boolean   | — | true   |
 
 ### Métodos Menu 
@@ -281,7 +281,7 @@ NavMenu vertical puede ser colapsado.
 | Atributo     | Descripción                              | Tipo   | Valores aceptados | Por defecto |
 | ------------ | ---------------------------------------- | ------ | ----------------- | ----------- |
 | index        | identificador único                      | string/null | —            | null        |
-| popper-class | nombre personalizado de la clase del menu popup | string | —                 | —           |
+| popper-class | nombre personalizado de la clase del menú popup | string | —                 | —           |
 | show-timeout | tiempo de espera antes de mostrar un submenú | number | —                 | 300         |
 | hide-timeout | tiempo de espera antes de ocultar un submenú | number | —                 | 300         |
 | disabled | si esta `disabled` el sub-menu | boolean | — | false |
diff --git a/examples/docs/es/message-box.md b/examples/docs/es/message-box.md
index e19c246cbef..aaca3e9e10a 100644
--- a/examples/docs/es/message-box.md
+++ b/examples/docs/es/message-box.md
@@ -1,15 +1,15 @@
 ## MessageBox
 
-Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y  mostrar mensajes de aviso.
+Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar información, confirmar operaciones y  mostrar mensajes de aviso.
 :::tip
-Por diseño los message box nos proveen de simulaciones de sistemas como los componentes `alert`, `confirm` y `prompt`，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog.
+Por diseño los message box nos proveen de simulaciones de sistemas como los componentes `alert`, `confirm` y `prompt`，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilice el componente Dialog.
 :::
 
 ### Alert
 
 Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.
 
-:::demo Desplegar una alerta utilizando el metodo `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesamiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberias importar una libreria de terceros de polyfill o utilizar callbacks.
+:::demo Desplegar una alerta utilizando el método `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar clic fuera de la caja. En este ejemplo, dos parámetros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesamiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberías importar una librería de terceros de polyfill o utilizar callbacks.
 
 ```html
 <template>
@@ -38,10 +38,10 @@ Alert interrumpe las operaciones realizadas hasta que el usuario confirme la ale
 
 ### Confirm
 
-Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
+Confirm es utilizado para preguntar al usuario y recibir una confirmación.
 
 
-:::demo Llamando al metodo `$confirm` para abrir el componente confirm, y simula el sistema `confirm`. Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto. El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aqui utilizamos `Promise` para manejar posteriormente el proceso. 
+:::demo Llamando al método `$confirm` para abrir el componente confirm, y simula el sistema `confirm`. También podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto. El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aquí utilizamos `Promise` para manejar posteriormente el proceso. 
 
 ```html
 <template>
@@ -77,9 +77,9 @@ Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
 
 ### Prompt
 
-Prompt es utilizado cuando se requiere entrada de informacion del usuario.
+Prompt es utilizado cuando se requiere entrada de información del usuario.
 
-:::demo Llamando al metodo `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parametro `inputPattern` para especificar tu propio patron RegExp. Utiliza el parametro `inputValidator` para especificar el metodo de validacion, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validacion a fallado, y la cadena regresada se usara como `inputErrorMessage`. Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro `inputPlaceholder`.
+:::demo Llamando al método `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parámetro `inputPattern` para especificar tu propio patrón RegExp. Utiliza el parámetro `inputValidator` para especificar el método de validación, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validación a fallado, y la cadena regresada se usara como `inputErrorMessage`. Ademas, puedes personalizar el atributo placeholder del input box con el parámetro `inputPlaceholder`.
 
 ```html
 <template>
@@ -117,7 +117,7 @@ Prompt es utilizado cuando se requiere entrada de informacion del usuario.
 
 Puede ser personalizado para mostrar diversos contenidos.
 
-:::demo Los tres metodos mencionados anteriormente son un rempaquetado del metodo `$msgbox`. En este ejemplo se realiza una llamada al metodo `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo `beforeClose`. Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: `action`, `instance` y `done`. Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando `loading` para el boton de confirmacion; puede invocar el metodo `done` para cerrar la instancia del componente MessageBox  (si el metodo `done` no es llamado dentro del atributo `beforeClose`, la instancia no podra cerrarse).
+:::demo Los tres métodos mencionados anteriormente son un rempaquetado del método `$msgbox`. En este ejemplo se realiza una llamada al método `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el botón cancelar es mostrado en pantalla. Además podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del botón (el botón de confirmación también cuenta con estos campos, y podrá encontrar una lista completa de estos atributos al final de esta documentación). Este ejemplo también utiliza el atributo `beforeClose`. Es un método que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecución detendrá el cierre de la instancia. Tiene tres parámetros: `action`, `instance` y `done`. Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando `loading` para el botón de confirmación; puede invocar el método `done` para cerrar la instancia del componente MessageBox  (si el método `done` no es llamado dentro del atributo `beforeClose`, la instancia no podrá cerrarse).
 
 ```html
 <template>
@@ -197,7 +197,7 @@ El contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes
 :::
 
 :::warning
-Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
+Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegúrese que el contenido de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
 :::
 
 ### Distinguir entre cancelar y cerrar
@@ -242,7 +242,7 @@ En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede t
 ```
 :::
 
-### Centered content
+### Contenido centrado
 El contenido del componente MessageBox puede ser centrado.
 
 :::demo Establecer `center` a `true` centrara el contenido
@@ -279,9 +279,9 @@ El contenido del componente MessageBox puede ser centrado.
 ```
 :::
 
-### Metodos Globales
+### Métodos Globales
 
-Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Asi que en una instancia de Vue puedes llamar el metodo `MessageBox` como lo que hicimos en esta pagina. Los parametros son:
+Si Element fue importado completamente, agregara los siguientes métodos globales para Vue.prototype: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Así que en una instancia de Vue puedes llamar el método `MessageBox` como lo que hicimos en esta pagina. Los parámetros son:
 - `$msgbox(options)`
 - `$alert(message, title, options)` or `$alert(message, options)`
 - `$confirm(message, title, options)` or `$confirm(message, options)`
@@ -295,7 +295,7 @@ Si prefieres importar `MessageBox` cuando lo necesites (on demand):
 import { MessageBox } from 'element-ui';
 ```
 
-Los metodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` y `MessageBox.prompt`. Los parametros son los mismos que los anteriores.
+Los métodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` y `MessageBox.prompt`. Los parámetros son los mismos que los anteriores.
 
 ### Opciones
 
@@ -306,26 +306,26 @@ Los metodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.conf
 | dangerouslyUseHTMLString | utilizado para que `message` sea tratado como una cadena HTML | boolean                                  | —                                | false                                    |
 | type                     | tipo de mensaje , utilizado para mostrar el  icono | string                                   | success / info / warning / error | —                                        |
 | iconClass                | clase personalizada para el icono, sobreescribe `type` | string         | —                          | —           |
-| customClass              | nombre de la clase personzalida para el componente MessageBox | string                                   | —                                | —                                        |
+| customClass              | nombre de la clase personalizada para el componente MessageBox | string                                   | —                                | —                                        |
 | callback                 | MessageBox callback al cerrar si no desea utilizar Promise | function(action), donde la accion puede ser 'confirm', 'cancel' o 'close', e `instance`  es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia | —                                | —                                        |
 | beforeClose              | callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre | function(action, instance, done), donde `action` pueden ser 'confirm', 'cancel' o 'close'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | —                                | —                                        |
 | distinguishCancelAndClose | si se debe distinguir entre cancelar y cerrar | boolean | — | false |
 | lockScroll               | utilizado para bloquear el desplazamiento del contenido del MessageBox prompts | boolean                                  | —                                | true                                     |
-| showCancelButton         | utlizado para mostrar un boton cancelar  | boolean                                  | —                                | false (true cuando es llamado con confirm y prompt) |
-| showConfirmButton        | utlizado para mostrar un boton confirmar | boolean                                  | —                                | true                                     |
-| cancelButtonText         | contenido de texto del boton cancelar    | string                                   | —                                | Cancel                                   |
-| confirmButtonText        | contenido de texto del boton confirmar   | string                                   | —                                | OK                                       |
-| cancelButtonClass        | nombre de la clase personalizada del boton cancelar | string                                   | —                                | —                                        |
-| confirmButtonClass       | nombre de la clase personalizada del boton confirmar | string                                   | —                                | —                                        |
-| closeOnClickModal        | utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara | boolean                                  | —                                | true (false cuando es llamado con alert) |
-| closeOnPressEscape       | utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC | boolean                                  | —                                | true (false cuando es llamado con alert) |
+| showCancelButton         | utilizado para mostrar un botón cancelar | boolean                                  | —                                | false (true cuando es llamado con confirm y prompt) |
+| showConfirmButton        | utilizado para mostrar un botón confirmar | boolean                                  | —                                | true                                     |
+| cancelButtonText         | contenido de texto del botón cancelar | string                                   | —                                | Cancel                                   |
+| confirmButtonText        | contenido de texto del botón confirmar | string                                   | —                                | OK                                       |
+| cancelButtonClass        | nombre de la clase personalizada del botón cancelar | string                                   | —                                | —                                        |
+| confirmButtonClass       | nombre de la clase personalizada del botón confirmar | string                                   | —                                | —                                        |
+| closeOnClickModal        | utilizado para que que el componente MessageBox pueda ser cerrado al dar clic en la mascara | boolean                                  | —                                | true (false cuando es llamado con alert) |
+| closeOnPressEscape       | utilizado para que que el componente MessageBox pueda ser cerrado al presionar la tecla ESC | boolean                                  | —                                | true (false cuando es llamado con alert) |
 | closeOnHashChange        | utilizado para cerra el componente MessageBox cuando hash cambie | boolean                                  | —                                | true                                     |
 | showInput                | utilizado para mostrar el componente input | boolean                                  | —                                | false (true cuando es llamado con prompt) |
 | inputPlaceholder         | placeholder para el componente input     | string                                   | —                                | —                                        |
 | inputType                | tipo del componente input                | string                                   | —                                | text                                     |
 | inputValue               | valor inicial del componente input       | string                                   | —                                | —                                        |
 | inputPattern             | regexp del componente input              | regexp                                   | —                                | —                                        |
-| inputValidator           | funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function                                 | —                                | —                                        |
-| inputErrorMessage        | mensaje de error cuando la validacion falla | string                                   | —                                | Illegal input                            |
+| inputValidator           | función de validación del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function                                 | —                                | —                                        |
+| inputErrorMessage        | mensaje de error cuando la validación falla | string                                   | —                                | Illegal input                            |
 | center                   | utilizado para alinear el contenido al centro | boolean                                  | —                                | false                                    |
-| roundButton              | utilizado para redondear el boton        | boolean                                  | —                                | false                                    |
+| roundButton              | utilizado para redondear el botón   | boolean                                  | —                                | false                                    |
diff --git a/examples/docs/es/message.md b/examples/docs/es/message.md
index 9e3043097db..61c5c609e01 100644
--- a/examples/docs/es/message.md
+++ b/examples/docs/es/message.md
@@ -1,12 +1,12 @@
 ## Message
 
-Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.
+Utilizado para mostrar retroalimentación después de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificación pasiva a nivel de sistema.
 
-### Uso basico
+### Uso básico
 
-Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
+Se muestra en la parte superior de la pagina y desaparece después de 3 segundos.
 
-:::demo La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas en detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.
+:::demo La configuración del componente Message es muy similar al del componente notification, así que parte de las opciones no serán explicadas en detalle aquí. Puedes consultar la tabla de opciones en la parte inferior combinada con la documentación del componente notification para comprenderla. Element a registrado un método `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parámetro, y lo mostrara como el cuerpo principal.
 
 ```html
 <template>
@@ -38,9 +38,9 @@ Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
 
 ### Tipos
 
-Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.
+Utilizados para mostrar retroalimentación de Success, Warning, Message y Error activities.
 
-:::demo Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de `type` puede definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.
+:::demo Cuando necesite mas personalización, el componente Message también puede tomar un objeto como parámetro. Por ejemplo, estableciendo el valor de `type` puede definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. También, hay registrados métodos para los diferentes tipos, así que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.
 ```html
 <template>
   <el-button :plain="true" @click="open2">success</el-button>
@@ -80,9 +80,9 @@ Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error a
 
 ### Closable
 
-Un boton para cerrar que puede ser agregado.
+Un botón 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`.
+:::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 atributo `duration` que puede ser controlado. Por defecto la duración es de 3000 ms, y no desaparecerá al llegar a `0`.
 ```html
 <template>
   <el-button :plain="true" @click="open1">message</el-button>
@@ -130,7 +130,7 @@ Un boton para cerrar que puede ser agregado.
 ```
 :::
 
-### Centered text
+### Texto centrado
 Utiliza el atributo `center` para centrar el texto.
 
 :::demo
@@ -181,10 +181,10 @@ Utiliza el atributo `center` para centrar el texto.
 :::
 
 :::warning
-Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
+Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurese que el contenido de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
 :::
 
-### Metodos Globales
+### Métodos Globales
 
 Element ha agregado un método global llamado `$message` para Vue.prototype. Entonces en una instancia de vue puede llamar a `Message` como lo hicimos en esta pagina.
 
@@ -196,7 +196,7 @@ Import `Message`:
 import { Message } from 'element-ui';
 ```
 
-En este caso deberia llamar al metodo `Message(options)`. Tambien se han registrado metodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias.
+En este caso debería llamar al método `Message(options)`. También se han registrado métodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al método `Message.closeAll()` para cerrar manualmente todas las instancias.
 
 ### Options
 | Atributo                 | Descripcion                              | Tipo           | Valores permitidos         | Por defecto |
@@ -206,14 +206,15 @@ En este caso deberia llamar al metodo `Message(options)`. Tambien se han registr
 | iconClass                | clase personalizada para el icono, sobreescribe `type` | string         | —                          | —           |
 | dangerouslyUseHTMLString | utilizado para que `message` sea tratado como cadena HTML | boolean        | —                          | false       |
 | customClass              | nombre de clase personalizado para el componente Message | string         | —                          | —           |
-| duration                 | muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente | number         | —                          | 3000        |
-| showClose                | utilizado para mostrar un boton para cerrar | boolean        | —                          | false       |
+| duration                 | muestra la duración,en milisegundos. si se establece en 0, este no se apagara automáticamente | number         | —                          | 3000        |
+| showClose                | utilizado para mostrar un botón para cerrar | boolean        | —                          | false       |
 | center                   | utilizado para centrar el texto          | boolean        | —                          | false       |
-| onClose                  | funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro | function       | —                          | —           |
-| offset | set the distance to the top of viewport | number | — | 20 |
+| onClose                  | función callback ejecutada cuando se cierra con una instancia de mensaje como parámetro | function       | —                          | —           |
+| offset | La distancia desde la parte superior del  viewport | number | — | 20 |
 
-### Metodos
-`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo `close`.
-| Metodo | Descripcion                  |
+### Métodos
+`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al método `close`.
+
+| Método | Descripción                  |
 | ------ | ---------------------------- |
 | close  | cierra el componente Message |
diff --git a/examples/docs/es/notification.md b/examples/docs/es/notification.md
index c707f00e837..010ce03e5d0 100644
--- a/examples/docs/es/notification.md
+++ b/examples/docs/es/notification.md
@@ -113,7 +113,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
 ```
 :::
 
-### Posicion personalizada
+### Posición personalizada
 
 La notificación puede surgir de cualquier rincón que uno desee.
 
@@ -280,7 +280,7 @@ Es posible ocultar el botón de cerrar
 ```
 :::
 
-### Metodo global
+### Método global
 
 Element ha añadido un método global `$notify` para Vue.prototype. Así que en una instancia de vue se puede llamar `Notification` como lo hacemos en esta página.
 
@@ -292,26 +292,26 @@ Importar `Notification`:
 import { Notification } from 'element-ui';
 ```
 
-En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. Puede llamar al metodo `Notification.closeAll()` para cerrar manualmente todas las instancias.
+En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. Puede llamar al método `Notification.closeAll()` para cerrar manualmente todas las instancias.
 
 ### Opciones
-| Atributo                 | Descripción                              | Tipo             | Valores aceptados                        | Por defecto |
-| ------------------------ | ---------------------------------------- | ---------------- | ---------------------------------------- | ----------- |
-| title                    | titulo                                   | string           | —                                        | —           |
-| message                  | mensaje                                  | string/Vue.VNode | —                                        | —           |
-| dangerouslyUseHTMLString | si  `message` es tratado como una cadena HTML | boolean          | —                                        | false       |
-| type                     | tipo de notificacion                     | string           | success/warning/info/error               | —           |
-| iconClass                | clase personalizada de icono. Será anulado por `type` | string           | —                                        | —           |
-| customClass              | nombre de clase personalizado para la notificacion | string           | —                                        | —           |
-| duration                 | duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0 | number           | —                                        | 4500        |
-| position                 | posicion personalizada                   | string           | top-right/top-left/bottom-right/bottom-left | top-right   |
-| showClose                | si se muestra el boton de cerrar         | boolean          | —                                        | true        |
-| onClose                  | funcion que se ejecuta cuando la notificación se cierra | function         | —                                        | —           |
-| onClick                  | funcion que se ejecuta cuando se hace click en la notificación | function         | —                                        | —           |
-| offset                   | desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento. | number           | —                                        | 0           |
-
-### Metodos
-`Notification` y `this.$notify` devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.
+| Atributo                 | Descripción                                                  | Tipo             | Valores aceptados                           | Por defecto |
+| ------------------------ | ------------------------------------------------------------ | ---------------- | ------------------------------------------- | ----------- |
+| title                    | titulo                                                       | string           | —                                           | —           |
+| message                  | mensaje                                                      | string/Vue.VNode | —                                           | —           |
+| dangerouslyUseHTMLString | si  `message` es tratado como una cadena HTML                | boolean          | —                                           | false       |
+| type                     | tipo de notificación                                         | string           | success/warning/info/error                  | —           |
+| iconClass                | clase personalizada de icono. Será anulado por `type`        | string           | —                                           | —           |
+| customClass              | nombre de clase personalizado para la notificación           | string           | —                                           | —           |
+| duration                 | duración antes de cerrar. Si no se quiere que se cierre automáticamente este valor debe estar a 0 | number           | —                                           | 4500        |
+| position                 | posición personalizada                                       | string           | top-right/top-left/bottom-right/bottom-left | top-right   |
+| showClose                | si se muestra el botón de cerrar                             | boolean          | —                                           | true        |
+| onClose                  | función que se ejecuta cuando la notificación se cierra      | function         | —                                           | —           |
+| onClick                  | función que se ejecuta cuando se hace clic en la notificación | function         | —                                           | —           |
+| offset                   | desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento. | number           | —                                           | 0           |
+
+### Métodos
+`Notification` y `this.$notify` devuelven la instancia de la notificación actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.
 
 | Metodo | Descripción            |
 | ------ | ---------------------- |
diff --git a/examples/docs/es/page-header.md b/examples/docs/es/page-header.md
index cade0906429..cb821ac6bbb 100644
--- a/examples/docs/es/page-header.md
+++ b/examples/docs/es/page-header.md
@@ -1,8 +1,8 @@
 ## PageHeader
 
-If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
+Si la ruta de la página es simple, se recomienda utilizar  PageHeader en lugar de Breadcrumb.
 
-### Basic
+### Básico
 
 :::demo
 ```html
@@ -18,22 +18,26 @@ If path of the page is simple, it is recommended to use PageHeader instead of th
     }
   }
 </script>
-```html
+```
 :::
 
-### Attributes
-| Attribute | Description   | Type      | Accepted Values               | Default |
+### Atributos
+| Atributos | Descripción | Tipo   | Valores aceptados | Por defecto |
 |---------- |-------------- |---------- |------------------------------ | ------ |
-| title     | main title    | string    |  —                            | Back   |
-| content   | content       | string    |  —                            | —      |
+| title     | titulo principal | string    |  —                            | Back   |
+| content   | contenido   | string    |  —                            | —      |
 
-### Events
-| Event Name | Description   | Parameters |
+### Eventos
+| Nombre evento | Descripción | Parámetros |
 |----------- |-------------- |----------- |
-| back       | triggers when right side is clicked | — |
+| back       | se activa cuando se hace clic en el lado derecho | — |
 
 ### Slots
-| slot      | Description            |
-|---------- | ---------------------- |
-| title     | title content          |
-| content   | content                |
+| Nombre del slot | Descripción |
+| --------------- | ----------- |
+| title           | titulo      |
+| content         | contenido   |
+
+```
+
+```
\ No newline at end of file
diff --git a/examples/docs/es/pagination.md b/examples/docs/es/pagination.md
index 4160be075a1..0c83302ca4c 100644
--- a/examples/docs/es/pagination.md
+++ b/examples/docs/es/pagination.md
@@ -22,7 +22,7 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación.
 ```
 :::
 
-### Numeros de paginas
+### Números de paginas
 
 :::demo De forma predeterminada, Pagination colapsa los botones del paginador adicionales cuando tiene más de 7 páginas. Esto se puede configurar con el atributo `pager-count`.
 ```html
@@ -51,7 +51,7 @@ Usa una paginación pequeña en caso de espacio limitado.
 
 ### Más elementos
 
-Agrega más modulos basados en su escenario.
+Agrega más módulos basados en su escenario.
 
 :::demo Este ejemplo es un completo caso de uso. Utiliza los eventos `size-change` y `current-change` para manejar el tamaño de página y el cambio de página. El atributo `page-sizes` acepta un arreglo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.
 
@@ -177,8 +177,8 @@ Cuando sólo hay una página, oculte la paginación configurando el atributo `hi
 | ----------------- | --------------------------------------- | ----------------------------- |
 | size-change       | se dispara cuando `page-size` cambia    | nuevo valor de `page-size`    |
 | current-change    | se dispara cuando `current-page` cambia | nuevo valor de `current-page` |
-| prev-click | Se dispara cuando el boton `prev` recibe el click y la pagina actual cambia | la nueva pagina actual |
-| next-click | Se dispara cuando el boton `next` recibe el click y la pagina actual cambia | la nueva pagina actual |
+| prev-click | Se dispara cuando el botón `prev` recibe el clic y la pagina actual cambia | la nueva pagina actual |
+| next-click | Se dispara cuando el botón `next` recibe el clic y la pagina actual cambia | la nueva pagina actual |
 
 ### Slot
 | Nombre | Descripción                              |
diff --git a/examples/docs/es/popover.md b/examples/docs/es/popover.md
index 0d8927960a4..90249fa8237 100644
--- a/examples/docs/es/popover.md
+++ b/examples/docs/es/popover.md
@@ -4,7 +4,7 @@
 
 Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.
 
-:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. As for the triggering element, you can write it in two different ways: use the `slot="reference"` [named slot](https://vuejs.org/v2/guide/components.html#Named-Slots), or use the `v-popover` directive and set it to Popover's `ref`.
+:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. En cuanto al elemento desencadenante, puedes escribirlo de dos maneras diferentes: usando el `slot="reference"`[named slot](https://vuejs.org/v2/guide/components.html#Named-Slots), o usando la directiva `v-popover` y poniendo  el `ref` de Popover.
 
 ```html
 <template>
@@ -146,12 +146,12 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 | disabled       | si el popover está deshabilitado         | boolean        | —                                        | false                                    |
 | value / v-model | si el popover está visible               | Boolean        | —                                        | false                                    |
 | offset         | popover offset                           | number         | —                                        | 0                                        |
-| transition     | popover transition animation             | string         | —                                        | el-fade-in-linear                        |
+| transition     | animación de transición del popover | string         | —                                        | el-fade-in-linear                        |
 | visible-arrow  | si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean        | —                                        | true                                     |
 | popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object         | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | popper-class   | clase propia para popover                | string         | —                                        | —                                        |
 | open-delay     | retraso de la aparición cuando `trigger` es hover, en milisegundos | number         | —                                        | —                                        |
-| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover  |   number           |      —      |  0    |
+| tabindex       | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover |   number           |      —      |  0    |
 
 ### Slot
 | Nombre    | Descripción                          |
@@ -163,6 +163,6 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 | Nombre del evento | Descripción                             | Parámetros |
 | ----------------- | --------------------------------------- | ---------- |
 | show              | se dispara cuando se muestra el popover | —          |
-| after-enter       | se dispara cuando la transicion de entrada termina | —       |
+| after-enter       | se dispara cuando la transición de entrada termina | —       |
 | hide              | se dispara cuando se oculta el popover  | —          |
-| after-leave       | se dispara cuando la transicion de salida termina | —        |
+| after-leave       | se dispara cuando la transición de salida termina | —        |
diff --git a/examples/docs/es/progress.md b/examples/docs/es/progress.md
index 7cc028b3ac4..9ff5eef3905 100644
--- a/examples/docs/es/progress.md
+++ b/examples/docs/es/progress.md
@@ -3,7 +3,7 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
 
 ### Barra de progreso lineal
 
-:::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`. You can custom text format by setting `format`.
+:::demo Usa el atributo `percentage` para asignar el porcentaje. Este es **requerido** y tiene que ser un valor entre `0-100`. Puede personalizar el formato de texto estableciendo `format`.
 
 ```html
 <el-progress :percentage="50"></el-progress>
@@ -24,8 +24,8 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
 ```
 :::
 
-### Pporcentage interno
-En este caso el porcentage no toma espacio adicional.
+### Porcentaje interno
+En este caso el porcentaje no toma espacio adicional.
 
 :::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
 ```html
@@ -36,9 +36,9 @@ En este caso el porcentage no toma espacio adicional.
 ```
 :::
 
-### Custom color
+### Color personalizado
 
-You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
+Puede utilizar el atributo `color` para establecer el color de la barra de progreso.
 
 :::demo
 
@@ -110,9 +110,9 @@ You can use `color` attr to set the progress bar color. it accepts color string,
 ```
 :::
 
-### Dashboard progress bar
+### Barra de progreso del panel de control
 
-:::demo You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
+:::demo También puede especificar el atributo `type` a `dashboard` para usar la barra de progreso del panel de control.
 
 ```html
 <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
diff --git a/examples/docs/es/quickstart.md b/examples/docs/es/quickstart.md
index 7be77300093..82517be2388 100644
--- a/examples/docs/es/quickstart.md
+++ b/examples/docs/es/quickstart.md
@@ -18,7 +18,7 @@ Puede importar Element completamente o solamente importar lo que necesite. Comen
 
 #### Importando todo
 
-In main.js:
+En main.js:
 
 ```javascript
 import Vue from 'vue';
@@ -233,7 +233,9 @@ Vue.prototype.$message = Message;
 
 ### Configuración global
 
-Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: `size`, `zIndex`. `size` define el tamaño por defecto de todos los componentes. The property `zIndex` sets the initial z-index (default: 2000) for modal boxes:
+Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: `size`, `zIndex`. `size` define el tamaño por defecto de todos los componentes.
+
+La propiedad `zIndex` indica el z-index inicial (por defecto: 2000) para los modal:
 
 Importando Element completamente：
 
@@ -253,7 +255,7 @@ Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
 Vue.use(Button);
 ```
 
-Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. The initial z-index of modal boxes is 3000.
+Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. El valor inicial de z-index para los modals se ha establecido a 3000.
 
 ### Empiece ya!
 
diff --git a/examples/docs/es/radio.md b/examples/docs/es/radio.md
index b29dcc1ba57..1addf5ecb8f 100644
--- a/examples/docs/es/radio.md
+++ b/examples/docs/es/radio.md
@@ -178,7 +178,7 @@ Radio con estilo de botón.
 | disabled | si el Radio está deshabilitado           | boolean                   | —                     | false       |
 | border   | agregar borde alrededor del elemento Radio | boolean                   | —                     | false       |
 | size     | tamaño del elemento Radio, solo funciona si `border` es verdadero | string                    | medium / small / mini | —           |
-| name     | atributo nativo 'name'                   | string                    | —                     | —           |
+| name     | atributo nativo `name`                 | string                    | —                     | —           |
 
 ### Atributos de Radio-button
 
@@ -186,7 +186,7 @@ Radio con estilo de botón.
 | -------- | ------------------------------ | --------------- | ---------------- | ----------- |
 | label    | el valor del Radio             | string / number | —                | —           |
 | disabled | si el Radio está deshabilitado | boolean         | —                | false       |
-| name     | atributo nativo 'name'         | string          | —                | —           |
+| name     | atributo nativo `name`         | string          | —                | —           |
 
 ### Atributos de Radio-group
 
@@ -194,7 +194,7 @@ Radio con estilo de botón.
 | ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
 | value / v-model | valor enlazado | string / number / boolean | — | — |
 | size       | tamaño de los `radio buttons` o `bordered radios` | string  | medium / small / mini | —                   |
-| disabled   | si la anidación de radios está desahabilitada | boolean | —                     | false               |
+| disabled   | si la anidación de radios está deshabilitada | boolean | —                     | false               |
 | text-color | color de las letras cuando el botón está activo | string  | —                     | #ffffff             |
 | fill       | color del borde y fondo cuando el botón está activo | string  | —                     | #409EFF             |
 
diff --git a/examples/docs/es/rate.md b/examples/docs/es/rate.md
index f83039ff84b..096f39848d9 100644
--- a/examples/docs/es/rate.md
+++ b/examples/docs/es/rate.md
@@ -4,7 +4,7 @@ Usado para la calificación
 
 ### Uso básico
 
-:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`. Or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.
+:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`. O puede asignarlos con un objeto cuya clave es el umbral entre dos niveles y cuyo valor es el color correspondiente.
 
 
 ```html
@@ -122,7 +122,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
 | allow-half               | si escoger media estrella está permitido | boolean | —                | false                                    |
 | low-threshold            | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo | number  | —                | 2                                        |
 | high-threshold           | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto | number  | —                | 4                                        |
-| colors                   | colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color | array/object   | —         | ['#F7BA2A', '#F7BA2A', '#F7BA2A']        |
+| colors                   | colores para los iconos. Si se trata de una matriz, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, si se trata de un objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser el color correspondiente. | array/object   | —         | ['#F7BA2A', '#F7BA2A', '#F7BA2A']        |
 | void-color               | color para iconos no seleccionados       | string  | —                | #C6D1DE                                  |
 | disabled-void-color      | color para las iconos no seleccionados de solo lectura | string  | —                | #EFF2F7                                  |
 | icon-classes             | nombres de clase de los iconos. Si es array, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, en caso contrario, si es objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser la clase de icono correspondiente. | array/object   | —                | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
diff --git a/examples/docs/es/select.md b/examples/docs/es/select.md
index f9b31feecc0..9d76e9d5409 100644
--- a/examples/docs/es/select.md
+++ b/examples/docs/es/select.md
@@ -541,16 +541,16 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
 | value-key            | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string   | —                 | value            |
 | size                 | tamaño del Input                         | string   | large/small/mini  | —                |
 | clearable            | si el select puede ser limpiado | boolean  | —                 | false            |
-| multiple-limit       | maximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`.  Sin límite cuando se fija a 0 | number   | —                 | 0                |
+| multiple-limit       | máximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`.  Sin límite cuando se fija a 0 | number   | —                 | 0                |
 | name                 | el atributo `name` del input seleccionado | string   | —                 | —                |
 | autocomplete         | el atributo `autocomplete` del input seleccionado | string   | —         | off              |
-| auto-complete         | @DEPRECATED en la proxima major version | string   | —         | off              |
+| auto-complete         | @DEPRECATED en la proxima major versión | string   | —         | off              |
 | placeholder          | placeholder                              | string   | —                 | Select           |
 | filterable           | si Select es filtrable                   | boolean  | —                 | false            |
 | allow-create         | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean  | —                 | false            |
-| filter-method        | metodo de filtrado personalizado         | function | —                 | —                |
-| remote               | si las opciones se traeran desde el servidor | boolean  | —                 | false            |
-| remote-method        | metodo de busqueda remota personalizada  | function | —                 | —                |
+| filter-method        | método de filtrado personalizado   | function | —                 | —                |
+| remote               | si las opciones se traerán desde el servidor | boolean  | —                 | false            |
+| remote-method        | método de búsqueda remota personalizada | function | —                 | —                |
 | loading              | si Select está cargando datos del servidor | boolean  | —                 | false            |
 | loading-text         | texto mostrado durante la carga de datos del servidor, también puedes usar la configuración de slot = "empty" | string   | —                 | Loading          |
 | no-match-text        | texto mostrado cuando ningún dato coincide con la consulta de filtrado. También puedes usar la configuración de slot = "empty" | string   | —                 | No matching data |
@@ -562,14 +562,14 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
 | automatic-dropdown | para non-filterable Select, este `prop` decide si el menú de opciones aparece cuando la entrada está enfocada | boolean | - | false |
 
 ### Eventos Select
-| Nombre         | Descripción                              | Parametros                               |
-| -------------- | ---------------------------------------- | ---------------------------------------- |
-| change         | se dispara cuando el valor del select cambia | valor actual del select                  |
-| visible-change | se dispara cuando el menu desplegable aparece o desaparece | true cuando aparece, y false en otro caso |
-| remove-tag     | se dispara cuando un tag es removido en modo multiple | el valor del tag removido                |
-| clear          | se dispara cuando el icono se clickea en un Select limpiable | —                                        |
-| blur           | se dispara cuando el input pierde el foco | (event: Event)                           |
-| focus          | se dispara cuando el input obtiene el foco | (event: Event)                           |
+| Nombre         | Descripción                                                  | Parametros                                |
+| -------------- | ------------------------------------------------------------ | ----------------------------------------- |
+| change         | se dispara cuando el valor del select cambia                 | valor actual del select                   |
+| visible-change | se dispara cuando el menú desplegable aparece o desaparece   | true cuando aparece, y false en otro caso |
+| remove-tag     | se dispara cuando un tag es removido en modo múltiple        | el valor del tag removido                 |
+| clear          | se dispara cuando el icono se clickea en un Select limpiable | —                                         |
+| blur           | se dispara cuando el input pierde el foco                    | (event: Event)                            |
+| focus          | se dispara cuando el input obtiene el foco                   | (event: Event)                            |
 
 ### Select Slots
 | Name    | Description |
diff --git a/examples/docs/es/slider.md b/examples/docs/es/slider.md
index 9c1170344de..6f6e4a8aad9 100644
--- a/examples/docs/es/slider.md
+++ b/examples/docs/es/slider.md
@@ -93,7 +93,7 @@ Las opciones pueden ser discretas.
 
 ### Slider con input
 
-Inserte el valor a traves de un input
+Inserte el valor a través de un input
 
 :::demo Configure el atributo `show-input` para que muestre un input a la derecha.
 
@@ -217,11 +217,11 @@ Se soporta la selección de un rango de valores.
 | Atributo            | Descripción                              | Tipo            | Valores aceptados | Por defecto |
 | ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |
 | value / v-model      | valor enlazado                           | number          | —                 | 0           |
-| min                 | valor minimo                             | number          | —                 | 0           |
+| min                 | valor mínimo                       | number          | —                 | 0           |
 | max                 | valor máximo                             | number          | —                 | 100         |
 | disabled            | si el Slider esta deshabitado            | boolean         | —                 | false       |
 | step                | tamaño del paso                          | number          | —                 | 1           |
-| show-input          | Si se muestra el input, trabaja cuando`range`es false | boolean         | —                 | false       |
+| show-input          | Si se muestra el input, trabaja cuando `range`es false | boolean         | —                 | false       |
 | show-input-controls | si se muestran los botones de control cuando`show-input`es true | boolean         | —                 | true        |
 | input-size          | tamaño del input   | string           | large / medium / small / mini | small |
 | show-stops          | si se muestran los puntos de ruptura (breakpoints) | boolean         | —                 | false       |
diff --git a/examples/docs/es/steps.md b/examples/docs/es/steps.md
index 4e83777f213..8c3f8a94b52 100644
--- a/examples/docs/es/steps.md
+++ b/examples/docs/es/steps.md
@@ -35,11 +35,11 @@ Barra de pasos simple.
 ```
 :::
 
-### Step bar con el status
+### Step bar con el estatus
 
 Muestra el estado del step para cada paso.
 
-:::demo Utilice el atributo `title` para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.
+:::demo Utilice el atributo `title` para establecer el nombre del paso, o sobrescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.
 
 ```html
 <el-steps :space="200" :active="1" finish-status="success">
@@ -79,7 +79,7 @@ Puede poner una descripción para cada paso.
 ```
 :::
 
-### Step bar with icon
+### Step bar con icono
 
 En la barra de pasos se pueden utilizar diversos iconos personalizados.
 
@@ -133,15 +133,15 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y
 
 ### Steps atributos
 
-| Atributo       | Descripción                              | Tipo            | Valores aceptados                        | Por defecto |
-| -------------- | ---------------------------------------- | --------------- | ---------------------------------------- | ----------- |
-| space          | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | —                                        | —           |
-| direction      | dirección de visualización               | string          | vertical/horizontal                      | horizontal  |
-| active         | actual paso de activación                | number          | —                                        | 0           |
-| process-status | status del paso actual                   | string          | wait / process / finish / error / success | process     |
-| finish-status  | status del paso final                    | string          | wait / process / finish / error / success | finish      |
-| align-center   | centrado de título y descripción         | boolean         | —                                        | false       |
-| simple         | si aplicar un tema simple                | boolean         | -                                        | false       |
+| Atributo       | Descripción                                                  | Tipo            | Valores aceptados                         | Por defecto |
+| -------------- | ------------------------------------------------------------ | --------------- | ----------------------------------------- | ----------- |
+| space          | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | —                                         | —           |
+| direction      | dirección de visualización                                   | string          | vertical/horizontal                       | horizontal  |
+| active         | actual paso de activación                                    | number          | —                                         | 0           |
+| process-status | estatus del paso actual                                      | string          | wait / process / finish / error / success | process     |
+| finish-status  | estatus del paso final                                       | string          | wait / process / finish / error / success | finish      |
+| align-center   | centrado de título y descripción                             | boolean         | —                                         | false       |
+| simple         | si aplicar un tema simple                                    | boolean         | -                                         | false       |
 
 ### Step atributos
 | Atributo    | Descripción                              | Tipo                                     | Valores aceptados | Por defecto |
@@ -156,5 +156,5 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y
 | ----------- | -------------------- |
 | icon        | Icono personalizado  |
 | title       | Titulo del paso      |
-| description | Descripcion del paso |
+| description | Descripción del paso |
 
diff --git a/examples/docs/es/switch.md b/examples/docs/es/switch.md
index f02afff366e..30ce08ace02 100644
--- a/examples/docs/es/switch.md
+++ b/examples/docs/es/switch.md
@@ -1,6 +1,6 @@
 ## Switch
 
-Switch es utilizdo para realizar cambios entre dos estados opuestos.
+Switch es utilizado para realizar cambios entre dos estados opuestos.
 
 ### Uso básico
 
@@ -121,8 +121,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
 | value / v-model      | valor enlazado                           | boolean / string / number | —                 | —           |
 | disabled            | si Switch esta deshabilitado             | boolean                   | —                 | false       |
 | width               | ancho del componente Switch              | number                    | —                 | 40          |
-| active-icon-class   | nombre de la clase del icono mostrado en el estado `on`, sobreescribe `active-text` | string                    | —                 | —           |
-| inactive-icon-class | nombre de la clase del icono mostrado en el estado `off`, sobreescribe `inactive-text` | string                    | —                 | —           |
+| active-icon-class   | nombre de la clase del icono mostrado en el estado `on`, sobrescribe `active-text` | string                    | —                 | —           |
+| inactive-icon-class | nombre de la clase del icono mostrado en el estado `off`, sobrescribe `inactive-text` | string                    | —                 | —           |
 | active-text         | texto mostrado en el estado `on`         | string                    | —                 | —           |
 | inactive-text       | texto mostrado en el estado `off`        | string                    | —                 | —           |
 | active-value        | cambia su valor cuando se encuentra en el estado `on` | boolean / string / number | —                 | true        |
diff --git a/examples/docs/es/table.md b/examples/docs/es/table.md
index c6f9f2abbeb..8a743d6cf83 100644
--- a/examples/docs/es/table.md
+++ b/examples/docs/es/table.md
@@ -1089,7 +1089,7 @@ Filtra la tabla para encontrar la información que necesita.
 
 Personalice la columna de la tabla para que pueda integrarse con otros componentes.
 
-:::demo Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
+:::demo Tiene acceso a la siguiente información: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
 ```html
 <template>
   <el-table
@@ -1244,7 +1244,7 @@ Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún m
 
 ### Fila expandible
 
-Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible.
+Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la característica de fila expandible.
 
 :::demo Puede activar la fila expandible estableciendo la propiedad `type` a `expand` y Scoped Slots. La plantilla para `el-table-column` se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando `Scoped Slots` en plantillas de columna personalizadas.
 ```html
@@ -1334,7 +1334,7 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
 
 ### Datos tree y modo lazy
 
-:::demo Puede mostrar la estructura de datos tipo tree。Cuando se usa, la prop`row-key` es requerida。Entonces, los datos de las filas de los hijos pueden ser cargados asincrónicamente. Poner la propiedad `lazy` de Table a true y la función `load`. Especifique el atributo `hasChildren` en la fila para determinar qué fila contiene hijos.
+:::demo Puede visualizar datos de estructura de árbol. Cuando la fila contiene el campo `children`, se trata como datos anidados. Para renderizar datos anidados, la `row-key` es requerida。Ademas, los datos de las filas secundarias pueden ser cargados asincrónicamente. Poner la propiedad `lazy` de Table a true y la función `load`. Especifique el atributo `hasChildren` en la fila para determinar qué fila contiene descendencia. Tanto `children` como `hasChildren` pueden configurarse a través de `tree-props`.
 
 ```html
 <template>
@@ -1342,8 +1342,9 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
   <el-table
     :data="tableData"
     style="width: 100%;margin-bottom: 20px;"
+    row-key="id"
     border
-    row-key="id">
+    default-expand-all>
     <el-table-column
       prop="date"
       label="日期"
@@ -1365,7 +1366,7 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
     border
     lazy
     :load="load"
-    >
+    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
     <el-table-column
       prop="date"
       label="date"
@@ -1431,17 +1432,19 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
     },
     methods: {
       load(tree, treeNode, resolve) {
-        resolve([
-          {
-            id: 31,
-            date: '2016-05-01',
-            name: 'wangxiaohu'
-          }, {
-            id: 32,
-            date: '2016-05-01',
-            name: 'wangxiaohu'
-          }
-        ])
+        setTimeout(() => {
+          resolve([
+            {
+              id: 31,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }, {
+              id: 32,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }
+          ])
+        }, 1000)
       }
     },
   }
@@ -1591,7 +1594,7 @@ Para una tabla de números, puede agregar una fila extra en el pie de página de
 
 Configurar _rowspan_ y _colspan_ le permite fusionar celdas.
 
-:::demo Utilice el atributo `span-method` para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual `row`, columna actual `column`, índice de fila actual `rowIndex` y índice de columna actual `columnIndex`. El método debe devolver un arreglo de dos números, el primer número siendo `rowspan` y el segundo `colspan`. También puede devolver un objeto con las propiedades `rowspan` y `colspan`.
+:::demo Utilice el atributo `span-method` para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyendo la fila actual `row`, columna actual `column`, índice de fila actual `rowIndex` y índice de columna actual `columnIndex`. El método debe devolver un arreglo de dos números, el primer número siendo `rowspan` y el segundo `colspan`. También puede devolver un objeto con las propiedades `rowspan` y `colspan`.
 
 ```html
 <template>
@@ -1830,7 +1833,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | header-cell-style      | función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla | Function({row, column, rowIndex, columnIndex})/Object         | —                              | —                                        |
 | row-key | key de los datos de las filas, utilizada para optimizar el renderizado. Requerido si `reserve-selection` está activada o muestra los datos del árbol. Cuando su tipo es String, se admite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no se admite, en cuyo caso se debe utilizar la función. | Function(row)/String | — | — |
 | empty-text             | Texto mostrado cuando no existen datos. Puede personalizar esta área con `slot="empty"` | String                                   | —                              | No Data                                  |
-| default-expand-all     | especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna `type="expand"` | Boolean                                  | —                              | false                                    |
+| default-expand-all     | especifica si todas las filas se expanden por defecto, solo funciona cuando la tabla tiene una columna `type="expand"` | Boolean                                  | —                              | false                                    |
 | expand-row-keys        | establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer `row-key` antes de usar esta propiedad | Array                                    | —                              |                                          |
 | default-sort           | establece la columna y orden por defecto. La propiedad `prop` es utilizada para establecer la columna de ordenamiento por defecto, la propiedad `order` es utilizada para definir el tipo de orden por defecto | Object                                   | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
 | tooltip-effect         | propiedad `effect` para efectos en tooltip | String                                   | dark/light                     |                                          |
@@ -1841,7 +1844,8 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | select-on-indeterminate | controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas.               | Boolean   | — | true |
 | indent                 | indentación horizontal de los datos en formato tree | Number    | — | 16   |
 | lazy                   | si se realiza un lazy loading de los datos | Boolean   | — | —    |
-| load                   | metodo para cargar las filas de los hijos, solamente funciona cuando `lazy`es true | Function({ row, treeNode, resolve }) | — | — |
+| load                   | método para cargar las filas de los hijos, solamente funciona cuando `lazy`es true | Function(row, treeNode, resolve) | — | — |
+| tree-props             | configuración para renderizar datos anidados | Object    | — | { hasChildren: 'hasChildren', children: 'children' } |
 
 ### Eventos de la tabla
 | Nombre del evento  | Descripción                              | Parámetros                        |
@@ -1856,21 +1860,21 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | row-click          | se dispara cuando se hace clic en una fila | row, column, event                |
 | row-contextmenu    | se dispara cuando el usuario hace clic derecho en una fila | row, column, event                        |
 | row-dblclick       | se dispara cuando se hace doble clic en una fila | row, column, event                        |
-| header-click       | se dispara cuando se hace click en una cabecera de columna | column, event                     |
+| header-click       | se dispara cuando se hace clic en una cabecera de columna | column, event                     |
 | header-contextmenu | se dispara cuando el usuario hace clic derecho en una cabecera de columna | column, event                     |
 | sort-change        | se dispara cuando el ordenamiento de la tabla cambia | { column, prop, order }           |
 | filter-change      | clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada | filters                           |
 | current-change     | se dispara cuando la fila actual cambia  | currentRow, oldCurrentRow         |
 | header-dragend     | se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera. | newWidth, oldWidth, column, event |
-| expand-change      | se dispara cuando el usuario expande o colapsa una fila | row, expandedRows                 |
+| expand-change      | se activa cuando el usuario expande o colapsa una fila (para la tabla expansible, el segundo parámetro es expandedRows; para la tabla de árbol, el segundo parámetro es expanded) | row, (expandedRows \| expanded) |
 
 ### Métodos de la tabla
 | Metodo             | Descripción                              | Parametros    |
 | ------------------ | ---------------------------------------- | ------------- |
 | clearSelection     | utilizado en selección múltiple de la tabla, limpiar selección | —     |
 | toggleRowSelection | utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada | row, selected |
-| toggleAllSelection | usado en Table de seleccion multiple, cambia los estados de seleccion de todas las filas. | - |
-| toggleRowExpansion | utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada | row, expanded |
+| toggleAllSelection | usado en Table de selección múltiple, cambia los estados de selección de todas las filas. | - |
+| toggleRowExpansion | utilizado en la Tabla expandible o en la Tabla de árbol, conmutar si se desglosa una determinada línea. Con el segundo parámetro, se puede fijar directamente si esta línea se desglosa o se pliega | row, expanded |
 | setCurrentRow      | utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección | row           |
 | clearSort          | limpiar ordenamiento, restaurar datos a orden original | —             |
 | clearFilter        | Se utiliza para borrar todas las condiciones de filtro cuando no se pasan parámetros, los datos se restaurarán a un estado sin filtrar, o se puede pasar una matriz de columnas para borrar las condiciones de filtro de la columna especificada.  | columnKey |
@@ -1908,7 +1912,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | selectable            | función que determina si una cierta fila puede ser seleccionada, funciona cuando `type` esta en `selection` | Function(row, index)              | —                             | —           |
 | reserve-selection     | especifica si se reserva la selección después de actualizar los datos, funciona cuando `type` está en `selection`. Note que `row-key` es requerido para que esto funcione | boolean                           | —                             | false       |
 | filters               | un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, `text` y `value` son obligatorios | Array[{ text, value }]            | —                             | —           |
-| filter-placement      | colocación para el menu desplegable del filtro | String                            | same as Tooltip's `placement` | —           |
+| filter-placement      | colocación para el menú desplegable del filtro | String                            | same as Tooltip's `placement` | —           |
 | filter-multiple       | especifica si el filtrado de datos soporta múltiples opciones | Boolean                           | —                             | true        |
 | filter-method         | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | Function(value, row, column)      | —                             | —           |
 | filtered-value        | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | Array                             | —                             | —           |
diff --git a/examples/docs/es/tabs.md b/examples/docs/es/tabs.md
index d1ff146334c..8c3c7bc5280 100644
--- a/examples/docs/es/tabs.md
+++ b/examples/docs/es/tabs.md
@@ -288,14 +288,14 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
 | before-leave   | función `hook` antes de cambiar de pestaña. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se evitará el cambio. | Function(activeName, oldActiveName)  | — | — |
 
 ### Eventos de Pestañas
-| Nombre de Evento | Descripción                              | Parámetros                    |
-| ---------------- | ---------------------------------------- | ----------------------------- |
-| tab-click        | se lanza cuando se hace click a una pestaña | pestaña clickeada             |
-| tab-remove       | se lanza cuando se hace click al botón tab-remove | nombre de la pestaña removida |
-| tab-add          | se lanza cuando se hace click al botón tab-add | —                             |
+| Nombre de Evento | Descripción                                                  | Parámetros                    |
+| ---------------- | ------------------------------------------------------------ | ----------------------------- |
+| tab-click        | se lanza cuando se hace clic a una pestaña                   | pestaña clickeada             |
+| tab-remove       | se lanza cuando se hace clic al botón tab-remove             | nombre de la pestaña removida |
+| tab-add          | se lanza cuando se hace clic al botón tab-add                | —                             |
 | edit             | se lanza cuando los botones de tab-add y/o tab-remove son clickeados | (targetName, action)          |
 
-### Attributos del Tab-pane
+### Atributos del Tab-pane
 | Atributo | Descripción                                                  | Tipo    | Valores Aceptados | Default                                                      |
 | -------- | ------------------------------------------------------------ | ------- | ----------------- | ------------------------------------------------------------ |
 | label    | título de la pestaña                                         | string  | —                 | —                                                            |
diff --git a/examples/docs/es/tag.md b/examples/docs/es/tag.md
index 9646ef507ca..f87faa25a07 100644
--- a/examples/docs/es/tag.md
+++ b/examples/docs/es/tag.md
@@ -187,13 +187,13 @@ Tag provide three different themes: `dark`、`light` and `plain`
 ### Atributos
 | Atributo            | Descripción                         | Tipo    | Valores aceptados           | Por defecto |
 | ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
-| type                | component type                      | string  | success/info/warning/danger | —           |
+| type                | tipo de Tag | string  | success/info/warning/danger | —           |
 | closable            | si el Tag puede ser removido        | boolean | —                           | false       |
 | disable-transitions | si se deshabilitan las animaciones  | boolean | —                           | false       |
 | hit                 | si el  Tag tiene un borde resaltado | boolean | —                           | false       |
 | color               | color de fondo del Tag              | string  | —                           | —           |
 | size                | tamaño del Tag                      | string  | medium / small / mini       | —           |
-| effect | component theme | string | dark / light / plain | light |
+| effect | Tema del Tag | string | dark / light / plain | light |
 
 
 ### Eventos
diff --git a/examples/docs/es/time-picker.md b/examples/docs/es/time-picker.md
index cf968396643..36e20f8fab7 100644
--- a/examples/docs/es/time-picker.md
+++ b/examples/docs/es/time-picker.md
@@ -4,7 +4,7 @@ Use el Time Picker para input de tipo time.
 
 ### Selector de tiempo fijo
 
-Provee una lista de tiempo fijo para que los usuarios escogan.
+Provee una lista de tiempo fijo para que los usuarios escojan.
 
 :::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
diff --git a/examples/docs/es/timeline.md b/examples/docs/es/timeline.md
index dcd1dac1e9e..1c76ca6ed37 100644
--- a/examples/docs/es/timeline.md
+++ b/examples/docs/es/timeline.md
@@ -140,7 +140,7 @@ Las marcas de tiempo ( timestamp )  puede colocarse encima del contenido cuando
 |---------- |-------- |---------- |-------------  |-------- |
 | timestamp     | Contenido de las marcas de tiempo | string  | - | — |
 | hide-timestamp  | Si se muestra o no timestamp | boolean | — | false |
-| placement | la posicion de timestamp | string | top / bottom | bottom |
+| placement | la posición de timestamp | string | top / bottom | bottom |
 | type | tipo de nodo | string | primary / success / warning / danger / info | - |
 | color | color de fondo del nodo | string | hsl / hsv / hex / rgb | - |
 | size | tamaño del nodo | string | normal / large | normal |
@@ -149,5 +149,5 @@ Las marcas de tiempo ( timestamp )  puede colocarse encima del contenido cuando
 ### Timeline-Item Slot
 | name | Description |
 |------|--------|
-| — | Contenido personalizado del item del timeline |
-| dot | Definicion personalizada del nodo |
+| — | Contenido personalizado del ítem del timeline |
+| dot | Definición personalizada del nodo |
diff --git a/examples/docs/es/tooltip.md b/examples/docs/es/tooltip.md
index 1effec218c2..b1be34b4e4a 100644
--- a/examples/docs/es/tooltip.md
+++ b/examples/docs/es/tooltip.md
@@ -99,7 +99,7 @@ Tooltip tiene 9 colocaciones.
 
 ### Tema
 
-Tooltip tiene dos temas: `dark` and `light`.
+Tooltip tiene dos temas: `dark` y `light`.
 
 :::demo Establecer `effect` para modificar el tema, el valor por defecto es `dark`.
 ```html
@@ -116,7 +116,7 @@ Tooltip tiene dos temas: `dark` and `light`.
 
 Despliegue múltiples líneas de texto y establezca su formato.
 
-:::demo Sobre-escribiba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
+:::demo Sobrecriba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
 ```html
 <el-tooltip placement="top">
   <div slot="content">multiple lines<br/>second line</div>
@@ -133,7 +133,7 @@ el atributo `transition` permite personalizar la animación con la que el Toolti
 
 el atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`.
 
-De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.
+De hecho, Tooltip es una extensión basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.
 
 :::demo
 ```html
@@ -168,7 +168,6 @@ De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/ele
 ```
 :::
 
-
 :::tip
 El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
 
diff --git a/examples/docs/es/transfer.md b/examples/docs/es/transfer.md
index 679e8b67962..d617a563b04 100644
--- a/examples/docs/es/transfer.md
+++ b/examples/docs/es/transfer.md
@@ -1,7 +1,7 @@
 ## Transfer
 
 ### Uso básico
-:::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del item, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el `v-model` con un array.
+:::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del ítem, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el `v-model` con un array.
 ```html
 <template>
   <el-transfer
@@ -38,7 +38,7 @@
 
 Puede buscar y filtrar los items.
 
-:::demo Ponga el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del item contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
+:::demo Ponga el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del ítem contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada ítem. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
 ```html
 <template>
   <el-transfer
@@ -81,9 +81,9 @@ Puede buscar y filtrar los items.
 
 ### Personalizable
 
-Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.
+Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de estatus de la cabecera y el contenido del pie.
 
-:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Plus, you can also use scoped slot to customize data items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
+:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Además, también puede utilizar el scoped-slot para personalizar los elementos de datos. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
 ```html
 <template>
   <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>
@@ -238,7 +238,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
 ### Scoped Slot
 | Name | Description |
 |------|--------|
-| — | Contenido personalizado para los datos de los items. El parametro del scope es { option } |
+| — | Contenido personalizado para los datos de los items. El parámetro del scope es { option } |
 
 ### Methods
 | Method | Description | Parameters |
@@ -248,6 +248,6 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
 ### Eventos
 | Nombre | Descripcion                              | Parametros                               |
 | ------ | ---------------------------------------- | ---------------------------------------- |
-| change | se lanzá cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
+| change | se lanza cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
 | left-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |
 | right-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista derecha. | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |
diff --git a/examples/docs/es/transition.md b/examples/docs/es/transition.md
index bb31cd38089..f41a2a5ad8f 100644
--- a/examples/docs/es/transition.md
+++ b/examples/docs/es/transition.md
@@ -99,6 +99,7 @@ Puede usar directamente las transiciones incorporadas en Element. Antes de hacer
 ### Colapsado
 Para efectos de colapsado usar el componente `el-collapse-transition`.
 :::demo
+
 ```html
 <template>
   <div>
@@ -140,7 +141,7 @@ Para efectos de colapsado usar el componente `el-collapse-transition`.
 ```
 :::
 
-### On demand
+### Bajo demanda
 
 ```js
 // fade/zoom
diff --git a/examples/docs/es/tree.md b/examples/docs/es/tree.md
index 539eac6962d..c66065aa10c 100644
--- a/examples/docs/es/tree.md
+++ b/examples/docs/es/tree.md
@@ -133,7 +133,7 @@ Usado para la selección de nodos.
 ```
 :::
 
-### Nodos hoja en modo perezoso
+### Nodos hoja en modo perezoso (lazy load)
 
 :::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
@@ -183,7 +183,7 @@ Usado para la selección de nodos.
 
 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.
+:::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="data"
@@ -399,7 +399,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
 ### Contenido personalizado en los nodos
 El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.
 
-:::demo Hay dos maneras de personalizar la plantilla para los nodos de árbol: `render-content` y scoped slot. Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Si prefiere scoped slot, tendrá acceso a los `nodos` y `datos` en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Tenga en cuenta que este ejemplo no puede ejecutarse en codepen.io ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
+:::demo Hay dos maneras de personalizar la plantilla para los nodos de árbol: `render-content` y scoped slot. Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciones de renderizado. Si prefiere scoped slot, tendrá acceso a los `nodos` y `datos` en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Tenga en cuenta que este ejemplo no puede ejecutarse en codepen.io ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
 ```html
 <div class="custom-tree-container">
   <div class="block">
@@ -534,7 +534,7 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
 ### Filtrado de nodos
 Los nodos del árbol se pueden filtrar.
 
-:::demo Invoque el método `filter` de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado.
+:::demo Invoque el método `filter` de la instancia de Tree para filtrar los nodos. Su parámetro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado.
 ```html
 <el-input
   placeholder="Filter keyword"
@@ -800,15 +800,15 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 | auto-expand-parent    | Expandir un nodo padre si el hijo está seleccionado | boolean                           | —                 | true        |
 | default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array                             | —                 | —           |
 | show-checkbox         | Si un nodo es seleccionable              | boolean                           | —                 | false       |
-| check-strictly        | El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean                           | —                 | false       |
+| check-strictly        | El estado de selección de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean                           | —                 | false       |
 | default-checked-keys  | Array con claves de los nodos seleccionados inicialmente | array                             | —                 | —           |
 | current-node-key      | la clave del nodo inicialmente seleccionado | string, number                       | —               | —       |
-| filter-node-method    | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node)       | —                 | —           |
+| filter-node-method    | Esta función se ejecutará en cada nodo cuando se use el método filtrar, si devuelve `false` el nodo se oculta | Function(value, data, node)       | —                 | —           |
 | accordion             | Si solo un nodo de cada nivel puede expandirse a la vez | boolean                           | —                 | false       |
 | indent                | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number                            | —                 | 16          |
 | icon-class            | Icono del nodo del árbol de cliente                                                | string                            | -                 | -           |
 | lazy                  | si se trata de un nodo de hoja lazy load, utilizado con el atributo `load`  | boolean                     | —    | false |
-| draggable             | si se habilita la función de drag and drop en los nodos | boolean            | —    | false |
+| draggable             | si se habilita la función de drag & drop en los nodos | boolean            | —    | false |
 | allow-drag            | esta función se ejecutará antes de arrastrar un nodo. si devuelve `false`, el nodo no puede ser arrastrado. | Function(nodo) | —  | —  |
 | allow-drop            | esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. `type` tiene tres valores posibles: 'prev' (insertar el nodo de arrastre antes del nodo de destino), 'inner' (insertar el nodo de arrastre en el nodo de destino) y 'next' (insertar el nodo de arrastre después del nodo de destino) | Function(Nodoquesearrastra, Nododestino, type) | —    | —     |
 
@@ -821,6 +821,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 
 ### Métodos
 `Tree` tiene los siguientes métodos, que devuelven el array de nodos seleccionados.
+
 | Método            | Descripción                              | Parámetros                               |
 | ----------------- | ---------------------------------------- | ---------------------------------------- |
 | filter            | Filtra los nodos del árbol, los nodos filtrados estarán ocultos | Acepta un parámetro que será usado como primer parámetro para filter-node-method |
@@ -833,7 +834,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 | getHalfCheckedNodes | Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de nodos actualmente seleccionada. | - |
 | getHalfCheckedKeys | Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de claves del nodo actualmente seleccionado. | - |
 | getCurrentKey     | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | —                                        |
-| getCurrentNode    | return the highlight node's data (null if no node is highlighted)         | —                                        |
+| getCurrentNode    | devuelve los datos del nodo de resaltado (nulo si no hay ningún nodo resaltado) | —                                        |
 | setCurrentKey     | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado. Si es `null`, cancela los nodos actualmente resaltados |
 | setCurrentNode    | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado              |
 | getNode         | devuelve el nodo por el dato o la clave | (data) los datos o clave del nodo |
@@ -846,20 +847,20 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 | Nombre del evento | Descripción                              | Parámetros                               |
 | ----------------- | ---------------------------------------- | ---------------------------------------- |
 | node-click        | se lanza cuando un nodo es pinchado      | tres parámetros: el objeto del nodo seleccionado, propiedad `node` de TreeNode y el TreeNode en si |
-| node-contextmenu     | se lanza cuando en un nodo se hace click con el boton derecho | cuatro parámetros: evento, el objeto nodo sobre el que se hizo click, la propiedad `node`  del TreeNode, el TreeNode en si mismo |
+| node-contextmenu     | se lanza cuando en un nodo se hace clic con el botón derecho | cuatro parámetros: evento, el objeto nodo sobre el que se hizo clic, la propiedad `node`  del TreeNode, el TreeNode en si mismo |
 | check-change      | se lanza cuando el estado de selección del nodo cambia | tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados |
-| check   | se activa al hacer clic en la casilla de selección de un nodo | dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de status de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys |
+| check   | se activa al hacer clic en la casilla de selección de un nodo | dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de estatus de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys |
 | current-change    | cambia cuando el nodo actual cambia      | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode |
 | node-expand       | se lanza cuando el nodo actual se abre   | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si |
 | node-collapse     | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si |
-| node-drag-start | se activa cuando se inicia el arrastre | dos parametros: el objeto del nodo que se arrastrara, evento. |
-| node-drag-enter | se desencadena cuando el nodo de arrastre entra en otro nodo | tres parametros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento. |
-| node-drag-leave | se desencadena cuando el nodo de arrastre sale de un nodo | tres parametros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento. |
-| node-drag-over | se activa cuando se arrastra sobre un nodo (como el evento mouseover) | tres parametros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento. |
-| node-drag-end  | se activa cuando se termina de arrastrar | cuatro parametros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser `undefined` ), tipo de integracion (antes (before), despues (after), dentro (inner) ), evento. |
-| node-drop  | después de soltar el nodo de arrastre | cuatro parametros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integracion (antes (before), despues (after), dentro (inner) ), evento. |
+| node-drag-start | se activa cuando se inicia el arrastre | dos parámetros: el objeto del nodo que se arrastrara, evento. |
+| node-drag-enter | se desencadena cuando el nodo de arrastre entra en otro nodo | tres parámetros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento. |
+| node-drag-leave | se desencadena cuando el nodo de arrastre sale de un nodo | tres parámetros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento. |
+| node-drag-over | se activa cuando se arrastra sobre un nodo (como el evento mouseover) | tres parámetros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento. |
+| node-drag-end  | se activa cuando se termina de arrastrar | cuatro parámetros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser `undefined` ), tipo de integración (antes (before), después (after), dentro (inner) ), evento. |
+| node-drop  | después de soltar el nodo de arrastre | cuatro parámetros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integración (antes (before), después (after), dentro (inner) ), evento. |
 
 ### Scoped Slot
-| Name | Description |
+| Nombre | Descripción |
 |------|--------|
 | — | Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }. |
diff --git a/examples/docs/es/upload.md b/examples/docs/es/upload.md
index 247074e95cb..3a8ff33fdef 100644
--- a/examples/docs/es/upload.md
+++ b/examples/docs/es/upload.md
@@ -268,33 +268,33 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
 :::
 
 ### Atributos
-| Atributo         | Descripción                              | Tipo                               | Valores aceptados         | Por defecto |
-| ---------------- | ---------------------------------------- | ---------------------------------- | ------------------------- | ----------- |
-| action           | obligatorio, URL de la petición          | string                             | —                         | —           |
-| headers          | cabeceras de la petición                 | object                             | —                         | —           |
-| multiple         | especifica si se permite subir múltiples archivos | boolean                            | —                         | —           |
-| data             | opciones adicionales de la petición      | object                             | —                         | —           |
-| name             | nombre clave del archivo                 | string                             | —                         | file        |
-| with-credentials | especifica si enviará cookies            | boolean                            | —                         | false       |
-| show-file-list   | especifica si se debe mostrar la lista de archivos cargados | boolean                            | —                         | true        |
-| drag             | se especifica si se activará el modo arrastrar y soltar | boolean                            | —                         | false       |
+| Atributo         | Descripción                                                  | Tipo                               | Valores aceptados         | Por defecto |
+| ---------------- | ------------------------------------------------------------ | ---------------------------------- | ------------------------- | ----------- |
+| action           | obligatorio, URL de la petición                              | string                             | —                         | —           |
+| headers          | cabeceras de la petición                                     | object                             | —                         | —           |
+| multiple         | especifica si se permite subir múltiples archivos            | boolean                            | —                         | —           |
+| data             | opciones adicionales de la petición                          | object                             | —                         | —           |
+| name             | nombre clave del archivo                                     | string                             | —                         | file        |
+| with-credentials | especifica si enviará cookies                                | boolean                            | —                         | false       |
+| show-file-list   | especifica si se debe mostrar la lista de archivos cargados  | boolean                            | —                         | true        |
+| drag             | se especifica si se activará el modo arrastrar y soltar      | boolean                            | —                         | false       |
 | accept           | acepta [tipos de archivos](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), puede no funcionar cuando `thumbnail-mode` esta en `true` | string                             | —                         | —           |
-| on-preview       | _hook_ lanzado al hacer clic en los archivos subidos | function(file)                     | —                         | —           |
-| on-remove        | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList)           | —                         | —           |
+| on-preview       | _hook_ lanzado al hacer clic en los archivos subidos         | function(file)                     | —                         | —           |
+| on-remove        | _hook_ lanzado cuando los archivos son eliminados            | function(file, fileList)           | —                         | —           |
 | on-success       | _hook_ lanzado cuando los archivos fueron cargados correctamente | function(response, file, fileList) | —                         | —           |
-| on-error         | _hook_ lanzado cuando han ocurrido algunos errores | function(err, file, fileList)      | —                         | —           |
-| on-progress      | _hook_ lanzado cuando se produce algún progreso | function(event, file, fileList)    | —                         | —           |
+| on-error         | _hook_ lanzado cuando han ocurrido algunos errores           | function(err, file, fileList)      | —                         | —           |
+| on-progress      | _hook_ lanzado cuando se produce algún progreso              | function(event, file, fileList)    | —                         | —           |
 | on-change        | _hook_ lanzado cuando el archivo seleccionado se carga correctamente o falla | function(file, fileList)           | —                         | —           |
 | before-upload    | _hook_ lanzado antes de que el archivo sea cargado. Si este devuelve `true` o `Promise` entonces será rechazado, la carga puede ser cancelada | function(file)                     | —                         | —           |
-| before-remove    | _hook_ lanzado antes de eliminar un archivo. Los parametros son el archivo y la lista de archivos. Si se devuelve `false` o se devuelve una `Promise` y que luego es rechazada, la eliminación será abortada. | function(file, fileList)           | —                         | —           |
-| thumbnail-mode   | especifica si se mostrará la miniatura   | boolean                            | —                         | false       |
+| before-remove    | _hook_ lanzado antes de eliminar un archivo. Los parámetros son el archivo y la lista de archivos. Si se devuelve `false` o se devuelve una `Promise` y que luego es rechazada, la eliminación será abortada. | function(file, fileList)           | —                         | —           |
+| thumbnail-mode   | especifica si se mostrará la miniatura                       | boolean                            | —                         | false       |
 | file-list        | archivos cargados por defecto, por ejemplo,  [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array                              | —                         | []          |
-| list-type        | tipo de lista de archivos                | string                             | text/picture/picture-card | text        |
-| auto-upload      | se especifica si se autocargan archivos  | boolean                            | —                         | true        |
-| http-request     | sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function                           | —                         | —           |
-| disabled         | especifica si se deshabilita la carga de archivos | boolean                            | —                         | false       |
-| limit            | número máximo de cargas permitidas       | number                             | —                         | —           |
-| on-exceed        | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList)          | —                         | -           |
+| list-type        | tipo de lista de archivos                                    | string                             | text/picture/picture-card | text        |
+| auto-upload      | se especifica si se autocargan archivos                      | boolean                            | —                         | true        |
+| http-request     | sobrescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function                           | —                         | —           |
+| disabled         | especifica si se deshabilita la carga de archivos            | boolean                            | —                         | false       |
+| limit            | número máximo de cargas permitidas                           | number                             | —                         | —           |
+| on-exceed        | _hook_ lanzado cuando el límite ha sido excedido             | function(files, fileList)          | —                         | -           |
 
 ### Slot
 | Nombre       | Descripcion                              |
diff --git a/examples/docs/fr-FR/table.md b/examples/docs/fr-FR/table.md
index d39555d5ca2..f2a4a378b71 100644
--- a/examples/docs/fr-FR/table.md
+++ b/examples/docs/fr-FR/table.md
@@ -1335,7 +1335,7 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
 
 ### Arborescence et lazy loading
 
-:::demo Vous pouvez afficher les données en arborescence, la propriété `row-key` devenant dans ce cas obligatoire. Les données enfants peuvent aussi être chargées de manière asynchrone. Mettez la propriété `lazy` à `true` and utilisez la fonction `load`. Spécifiez l'attribut `hasChildren` pour déterminer quelle ligne contient les enfants.
+:::demo You can display tree structure data. When row contains the `children` field, it is treated as nested data. For rendering nested data, the prop `row-key` is required。Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children. Both `children` and `hasChildren` can be configured via `tree-props`.
 
 ```html
 <template>
@@ -1343,11 +1343,12 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
   <el-table
     :data="tableData"
     style="width: 100%;margin-bottom: 20px;"
+    row-key="id"
     border
-    row-key="id">
+    default-expand-all>
     <el-table-column
       prop="date"
-      label="Date"
+      label="date"
       sortable
       width="180">
     </el-table-column>
@@ -1366,7 +1367,7 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
     border
     lazy
     :load="load"
-    >
+    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
     <el-table-column
       prop="date"
       label="Date"
@@ -1432,17 +1433,19 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
     },
     methods: {
       load(tree, treeNode, resolve) {
-        resolve([
-          {
-            id: 31,
-            date: '2016-05-01',
-            name: 'wangxiaohu'
-          }, {
-            id: 32,
-            date: '2016-05-01',
-            name: 'wangxiaohu'
-          }
-        ])
+        setTimeout(() => {
+          resolve([
+            {
+              id: 31,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }, {
+              id: 32,
+              date: '2016-05-01',
+              name: 'wangxiaohu'
+            }
+          ])
+        }, 1000)
       }
     },
   }
@@ -1832,7 +1835,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
 | header-cell-style | Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header. | Function({row, column, rowIndex, columnIndex})/Object | — | — |
 | row-key | Clé de chaque ligne, utilisée pour optimiser le rendu. Requise si `reserve-selection` est activé. Quand c'est un `String`, l'accès multi-niveaux est supporté, e.g. `user.info.id`, mais `user.info[0].id` n'est pas supporté. Dans ce dernier cas une `Function` devrait être utilisée. | Function(row)/String | — | — |
 | empty-text | Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à `slot="empty"`. | String | — | No Data |
-| default-expand-all | Si toutes les lignes sont étendues par défaut, ne marche que si des lignes ont type="expand". | Boolean | — | false |
+| default-expand-all | whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data | Boolean | — | false |
 | expand-row-keys | Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer `row-key` avant celle-ci. | Array | — | |
 | default-sort | Détermine l'ordre de tri par défaut. La propriété `prop` détermine la colonne par défaut, `order` détermine l'ordre par défaut. | Object | `order`: ascending, descending | Si `order` est absent, son défaut sera `ascending`. |
 | tooltip-effect | Propriété `effect` de Tooltip. | String | dark/light | | dark |
@@ -1841,9 +1844,10 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
 | summary-method | La méthode pour calculer la somme. | Function({ columns, data }) | — | — |
 | span-method | Méthode qui retourne les valeurs de colspan et rowspan. | Function({ row, column, rowIndex, columnIndex }) | — | — |
 | select-on-indeterminate | Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si `true`, toutes les lignes sont sélectionnées. | Boolean | — | true |
-| indent | Indentation horizontale de l'arborescence. | Number    | — | 16   |
-| lazy | Si le lazy loading doit être utilisé. | Boolean   | — | —    |
-| load | Méthode a utiliser pour le lazy loading, ne fonctionne que lorsque `lazy` est `true`. | Function({ row, treeNode, resolve }) | — | — |
+| indent                  | horizontal indentation of tree data      | Number    | — | 16   |
+| lazy                    | whether to lazy loading data             | Boolean   | — | —    |
+| load                    | method for loading child row data, only works when `lazy` is true | Function({ row, treeNode, resolve }) | — | — |
+| tree-props              | configuration for rendering nested data | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
 
 ### Évènements de Table
 
@@ -1865,7 +1869,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
 | filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered. | filters |
 | current-change | Se déclenche quand la ligne sélectionnée change. | currentRow, oldCurrentRow |
 | header-dragend | Se déclenche après un changement de taille de colonne en déplaçant la ligne verticale du header. | newWidth, oldWidth, column, event |
-| expand-change | Se déclenche quand l'utilisateur étend ou réduit une ligne. | row, expandedRows |
+| expand-change  | triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | row, (expandedRows \| expanded) |
 
 ### Méthodes de Table
 
@@ -1874,7 +1878,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
 | clearSelection | Dans les tables avec sélection multiple, efface la sélection. | — |
 | toggleRowSelection | Dans les tables avec sélection multiple, change la sélection d'une ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est sélectionnée. | row, selected |
 | toggleAllSelection | Utilisé dans les tables à sélection multiples, sélectionne toutes les lignes. | - |
-| toggleRowExpansion | Pour les lignes extensibles, change l'état de la ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est étendue. | row, expanded |
+| toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
 | setCurrentRow | Dans les tables à sélection simple, sélectionne une ligne. Sans paramètre la sélection est effacé. | row |
 | clearSort | Efface le tri. | — |
 | clearFilter | Efface les filtres des colonnes dont les `columnKey` sont passées. Si aucun paramètre, efface tout les filtres. | columnKeys |
diff --git a/examples/docs/fr-FR/tree.md b/examples/docs/fr-FR/tree.md
index 9b01918f085..1020ead6dbc 100644
--- a/examples/docs/fr-FR/tree.md
+++ b/examples/docs/fr-FR/tree.md
@@ -798,16 +798,16 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab
 | load                  | Méthode pour charger les noeuds enfants, uniquement en mode `lazy`.  | function(node, resolve)     | —               | —       |
 | render-content        | Fonction de rendu pour les noeuds.            | Function(h, { node, data, store }        | —               | —       |
 | highlight-current     | Si le noeud courant est mis en valeur.      | boolean                     | —               | false   |
-| default-expand-all    | Si tout les noeud sont ouverts par défaut.   | boolean                     | —               | false   |
+| default-expand-all    | Si tous les noeuds sont ouverts par défaut.   | boolean                     | —               | false   |
 | expand-on-click-node  | Si l'ouverture se fait aussi en cliquant sur le noeud. Si `false`, l'ouverture ne se fera qu'en cliquant sur l'icône. | boolean | — | true |
 | check-on-click-node   | Si la sélection se fait aussi en cliquant sur le noeud. Si `false`, la sélection ne se fera qu'en cliquant sur la checkbox. | boolean | — | false |
 | auto-expand-parent    | Si un noeud parent est automatiquement ouvert quand un noeud enfant s'ouvre. | boolean                     | —               | true    |
 | default-expanded-keys | Tableau des clés des noeuds initialement ouverts. | array                       | —               | —       |
 | show-checkbox         | Si un noeud est sélectionnable.           | boolean                     | —               | false   |
-| check-strictly        | Si la sélection d'un noeud affecte celle de son parent qaund `show-checkbox` est `true`. | boolean                     | —               | false   |
+| check-strictly        | Si la sélection d'un noeud affecte celle de son parent quand `show-checkbox` est `true`. | boolean                     | —               | false   |
 | default-checked-keys  | Tableau des clés des noeuds initialement sélectionnés. | array                       | —               | —       |
 | current-node-key      | Clé du noeud initialement sélectionné. | string, number                       | —               | —       |
-| filter-node-method    | Fonction executée sur chaque noeud pour le filtrage. Si elle retourne `false`, les noeuds seront cachés. | Function(value, data, node) | —               | —       |
+| filter-node-method    | Fonction exécutée sur chaque noeud pour le filtrage. Si elle retourne `false`, les noeuds seront cachés. | Function(value, data, node) | —               | —       |
 | accordion             | Si les noeuds fonctionnent en mode accordéon. | boolean                     | —               | false   |
 | indent                | Indentation horizontale des noeuds en px. | number                     | —    | 16 |
 | icon-class            | Icône pour chaque noeud.                                       | string                     | -    | -  |
@@ -837,7 +837,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab
 | setCheckedNodes | Détermine quels noeuds sont sélectionnés, ne marche que si `node_key` est assigné. | Un tableau de noeuds qui doivent être sélectionnés.          |
 | getCheckedKeys  | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne un tableau de clés des noeuds sélectionnés. | (leafOnly) Booléen, défaut à `false`. Si à `true`, Il retourne seulement un tableau des sous-noeuds sélectionnés. |
 | setCheckedKeys  | Détermine quels noeuds sont sélectionnés, ne marche que si `node_key` est assigné. | (keys, leafOnly) Accepte deux paramètres: 1. un tableau de clés de noeuds à sélectionner 2. un booléen avec pour défaut `false`. Si à `true`, Il retourne seulement un tableau des sous-noeuds sélectionnés. |
-| setChecked      | Détermine un noeud est sélectionnable, ne marche que si `node_key` est assigné. | (key/data, checked, deep) Accepte trois paramètres: 1. La clé ou les données du noeud 2. un booléen indiquant si sélectionné. 3. un booléen indiquant si profond. |
+| setChecked      | Détermine si un noeud est sélectionnable, ne marche que si `node_key` est assigné. | (key/data, checked, deep) Accepte trois paramètres: 1. La clé ou les données du noeud 2. un booléen indiquant si sélectionné. 3. un booléen indiquant si profond. |
 | getHalfCheckedNodes | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne la moitié des noeuds sélectionnés. | - |
 | getHalfCheckedKeys | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne les clés de la moitié des noeuds sélectionnés. | - |
 | getCurrentKey   | retourne la clé du noeud actuellement en valeur (`null` si aucun noeud n'est en valeur). | — |
diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md
index 769da8120ce..71fc7b4a0f9 100644
--- a/examples/docs/zh-CN/table.md
+++ b/examples/docs/zh-CN/table.md
@@ -1277,7 +1277,7 @@
 
 ### 树形数据与懒加载
 
-:::demo 支持树类型的数据。此时，必须要指定 `row-key`。支持子节点数据异步加载。设置 Table 的 `lazy` 属性为 true 与 加载函数 `load` ，指定 row 中的 `hasChildren` 来确定哪些行是包含子节点。
+:::demo 支持树类型的数据的显示。当 row 中包含 `children` 字段时，被视为树形数据。渲染树形数据时，必须要指定 `row-key`。支持子节点数据异步加载。设置 Table 的 `lazy` 属性为 true 与加载函数 `load` 。通过指定 row 中的 `hasChildren` 字段来指定哪些行是包含子节点。`children` 与 `hasChildren` 都可以通过 `tree-props` 配置。
 
 ```html
 <template>
@@ -1285,8 +1285,10 @@
   <el-table
     :data="tableData"
     style="width: 100%;margin-bottom: 20px;"
+    row-key="id"
     border
-    row-key="id">
+    default-expand-all
+    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
     <el-table-column
       prop="date"
       label="日期"
@@ -1312,7 +1314,7 @@
     border
     lazy
     :load="load"
-    >
+    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
     <el-table-column
       prop="date"
       label="日期"
@@ -1392,19 +1394,21 @@
     },
     methods: {
       load(tree, treeNode, resolve) {
-        resolve([
-          {
-            id: 31,
-            date: '2016-05-01',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1519 弄'
-          }, {
-            id: 32,
-            date: '2016-05-01',
-            name: '王小虎',
-            address: '上海市普陀区金沙江路 1519 弄'
-          }
-        ])
+        setTimeout(() => {
+          resolve([
+            {
+              id: 31,
+              date: '2016-05-01',
+              name: '王小虎',
+              address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+              id: 32,
+              date: '2016-05-01',
+              name: '王小虎',
+              address: '上海市普陀区金沙江路 1519 弄'
+            }
+          ])
+        }, 1000)
       }
     },
   }
@@ -1867,7 +1871,7 @@
 | header-cell-style | 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
 | row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：`user.info.id`，但不支持 `user.info[0].id`，此种情况请使用 `Function`。 | Function(row)/String | — | — |
 | empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | — | 暂无数据 |
-| default-expand-all | 是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效 | Boolean | — | false |
+| default-expand-all | 是否默认展开所有行，当 Tale 包含展开行存在或者为树形表格时有效 | Boolean | — | false |
 | expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。| Array | — | |
 | default-sort | 默认的排序列的 prop 和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序| Object | `order`: ascending, descending | 如果只指定了`prop`, 没有指定`order`, 则默认顺序是ascending |
 | tooltip-effect | tooltip `effect` 属性 | String | dark/light | | dark |
@@ -1878,7 +1882,8 @@
 | select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | Boolean | — | true |
 | indent      | 展示树形数据时，树节点的缩进 | Number | — | 16 |
 | lazy        | 是否懒加载子节点数据 | Boolean | — | — |
-| load        | 加载子节点数据的函数，lazy 为 true 时生效 | Function({ row, treeNode, resolve }) | — | — |
+| load        | 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 | Function(row, treeNode, resolve) | — | — |
+| tree-props  | 渲染嵌套数据的配置选项 | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
 
 ### Table Events
 | 事件名 | 说明 | 参数 |
@@ -1899,7 +1904,7 @@
 | filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
 | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
 | header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
-| expand-change | 当用户对某一行展开或者关闭的时候会触发该事件 | row, expandedRows |
+| expand-change  | 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） | row, (expandedRows \| expanded) |
 
 ### Table Methods
 | 方法名 | 说明 | 参数 |
@@ -1907,7 +1912,7 @@
 | clearSelection | 用于多选表格，清空用户的选择 | — |
 | toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
 | toggleAllSelection | 用于多选表格，切换所有行的选中状态 | - |
-| toggleRowExpansion | 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |
+| toggleRowExpansion | 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |
 | setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |
 | clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |
 | clearFilter | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey |
diff --git a/examples/versions.json b/examples/versions.json
index 36d3b9c99bc..aee720f3e16 100644
--- a/examples/versions.json
+++ b/examples/versions.json
@@ -1 +1 @@
-{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.0":"2.9"}
\ No newline at end of file
+{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.1":"2.9"}
\ No newline at end of file
diff --git a/package.json b/package.json
index 23a61ad44ac..096893018c8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-ui",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [
diff --git a/packages/table/src/config.js b/packages/table/src/config.js
new file mode 100644
index 00000000000..ba705ac632d
--- /dev/null
+++ b/packages/table/src/config.js
@@ -0,0 +1,123 @@
+import { getPropByPath } from 'element-ui/src/utils/util';
+
+export const cellStarts = {
+  default: {
+    order: ''
+  },
+  selection: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: '',
+    className: 'el-table-column--selection'
+  },
+  expand: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: ''
+  },
+  index: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: ''
+  }
+};
+
+// 这些选项不应该被覆盖
+export const cellForced = {
+  selection: {
+    renderHeader: function(h, { store }) {
+      return <el-checkbox
+        disabled={ store.states.data && store.states.data.length === 0 }
+        indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
+        nativeOn-click={ this.toggleAllSelection }
+        value={ this.isAllSelected } />;
+    },
+    renderCell: function(h, { row, column, store, $index }) {
+      return <el-checkbox
+        nativeOn-click={ (event) => event.stopPropagation() }
+        value={ store.isSelected(row) }
+        disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
+        on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
+    },
+    sortable: false,
+    resizable: false
+  },
+  index: {
+    renderHeader: function(h, { column }) {
+      return column.label || '#';
+    },
+    renderCell: function(h, { $index, column }) {
+      let i = $index + 1;
+      const index = column.index;
+
+      if (typeof index === 'number') {
+        i = $index + index;
+      } else if (typeof index === 'function') {
+        i = index($index);
+      }
+
+      return <div>{ i }</div>;
+    },
+    sortable: false
+  },
+  expand: {
+    renderHeader: function(h, { column }) {
+      return column.label || '';
+    },
+    renderCell: function(h, { row, store }) {
+      const classes = ['el-table__expand-icon'];
+      if (store.states.expandRows.indexOf(row) > -1) {
+        classes.push('el-table__expand-icon--expanded');
+      }
+      const callback = function(e) {
+        e.stopPropagation();
+        store.toggleRowExpansion(row);
+      };
+      return (<div class={ classes }
+        on-click={callback}>
+        <i class='el-icon el-icon-arrow-right'></i>
+      </div>);
+    },
+    sortable: false,
+    resizable: false,
+    className: 'el-table__expand-column'
+  }
+};
+
+export function defaultRenderCell(h, { row, column, $index }) {
+  const property = column.property;
+  const value = property && getPropByPath(row, property).v;
+  if (column && column.formatter) {
+    return column.formatter(row, column, value, $index);
+  }
+  return value;
+}
+
+export function treeCellPrefix(h, { row, treeNode, store }) {
+  if (!treeNode) return null;
+  const ele = [];
+  const callback = function(e) {
+    e.stopPropagation();
+    store.loadOrToggle(row);
+  };
+  if (treeNode.indent) {
+    ele.push(<span class="el-table__indent" style={{'padding-left': treeNode.indent + 'px'}}></span>);
+  }
+  if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
+    const expandClasses = ['el-table__expand-icon', treeNode.expanded ? 'el-table__expand-icon--expanded' : ''];
+    let iconClasses = ['el-icon-arrow-right'];
+    if (treeNode.loading) {
+      iconClasses = ['el-icon-loading'];
+    }
+    ele.push(<div class={ expandClasses }
+      on-click={ callback }>
+      <i class={ iconClasses }></i>
+    </div>);
+  } else {
+    ele.push(<span class="el-table__placeholder"></span>);
+  }
+  return ele;
+}
diff --git a/packages/table/src/filter-panel.vue b/packages/table/src/filter-panel.vue
index 9ff7b452471..d49f01277d9 100644
--- a/packages/table/src/filter-panel.vue
+++ b/packages/table/src/filter-panel.vue
@@ -72,17 +72,6 @@
       }
     },
 
-    customRender(h) {
-      return (<div class="el-table-filter">
-        <div class="el-table-filter__content">
-        </div>
-        <div class="el-table-filter__bottom">
-          <button on-click={ this.handleConfirm }>{ this.t('el.table.confirmFilter') }</button>
-          <button on-click={ this.handleReset }>{ this.t('el.table.resetFilter') }</button>
-        </div>
-      </div>);
-    },
-
     methods: {
       isActive(filter) {
         return filter.value === this.filterValue;
diff --git a/packages/table/src/store/current.js b/packages/table/src/store/current.js
new file mode 100644
index 00000000000..bde8393c578
--- /dev/null
+++ b/packages/table/src/store/current.js
@@ -0,0 +1,45 @@
+import { arrayFind } from 'element-ui/src/utils/util';
+import { getRowIdentity } from '../util';
+
+export default {
+  data() {
+    return {
+      states: {
+        current: null
+      }
+    };
+  },
+
+  methods: {
+    setCurrentRowKey(key) {
+      this.assertRowKey();
+
+      const { states } = this;
+      const { data = [], rowKey } = states;
+      const currentRow = arrayFind(data, item => getRowIdentity(item, rowKey) === key);
+      states.currentRow = currentRow ? currentRow : null;
+    },
+
+    updateCurrentRow() {
+      const { states, table } = this;
+      const { rowKey } = states;
+      // data 为 null 时，结构时的默认值会被忽略
+      const data = states.data || [];
+      const oldCurrentRow = states.currentRow;
+
+      // 当 currentRow 不在 data 中时尝试更新数据
+      if (data.indexOf(oldCurrentRow) === -1 && oldCurrentRow) {
+        let newCurrentRow = null;
+        if (rowKey) {
+          newCurrentRow = arrayFind(data, item => {
+            return getRowIdentity(item, rowKey) === getRowIdentity(oldCurrentRow, rowKey);
+          });
+        }
+        states.currentRow = newCurrentRow;
+        if (newCurrentRow !== oldCurrentRow) {
+          table.$emit('current-change', null, oldCurrentRow);
+        }
+      }
+    }
+  }
+};
diff --git a/packages/table/src/store/expand.js b/packages/table/src/store/expand.js
new file mode 100644
index 00000000000..65b7ce8a736
--- /dev/null
+++ b/packages/table/src/store/expand.js
@@ -0,0 +1,65 @@
+import { toggleRowStatus, getKeysMap, getRowIdentity } from '../util';
+
+export default {
+  data() {
+    return {
+      states: {
+        defaultExpandAll: false,
+        expandRows: []
+      }
+    };
+  },
+
+  methods: {
+    updateExpandRows() {
+      const { data = [], rowKey, defaultExpandAll, expandRows } = this.states;
+      if (defaultExpandAll) {
+        this.states.expandRows = data.slice();
+      } else if (rowKey) {
+        // TODO：这里的代码可以优化
+        const expandRowsMap = getKeysMap(expandRows, rowKey);
+        this.states.expandRows = data.reduce((prev, row) => {
+          const rowId = getRowIdentity(row, rowKey);
+          const rowInfo = expandRowsMap[rowId];
+          if (rowInfo) {
+            prev.push(row);
+          }
+          return prev;
+        }, []);
+      } else {
+        this.states.expandRows = [];
+      }
+    },
+
+    toggleRowExpansion(row, expanded) {
+      const changed = toggleRowStatus(this.states.expandRows, row, expanded);
+      if (changed) {
+        this.table.$emit('expand-change', row, this.states.expandRows.slice());
+        this.scheduleLayout();
+      }
+    },
+
+    setExpandRowKeys(rowKeys) {
+      this.assertRowKey();
+      // TODO：这里的代码可以优化
+      const { data, rowKey } = this.states;
+      const keysMap = getKeysMap(data, rowKey);
+      this.states.expandRows = rowKeys.reduce((prev, cur) => {
+        const info = keysMap[cur];
+        if (info) {
+          prev.push(info.row);
+        }
+        return prev;
+      }, []);
+    },
+
+    isRowExpanded(row) {
+      const { expandRows = [], rowKey } = this.states;
+      if (rowKey) {
+        const expandMap = getKeysMap(expandRows, rowKey);
+        return !!expandMap[getRowIdentity(row, rowKey)];
+      }
+      return expandRows.indexOf(row) !== -1;
+    }
+  }
+};
diff --git a/packages/table/src/store/helper.js b/packages/table/src/store/helper.js
new file mode 100644
index 00000000000..81d73f6042d
--- /dev/null
+++ b/packages/table/src/store/helper.js
@@ -0,0 +1,37 @@
+import Store from './index';
+
+export function createStore(table, initialState = {}) {
+  if (!table) {
+    throw new Error('Table is required.');
+  }
+
+  const store = new Store();
+  store.table = table;
+  Object.keys(initialState).forEach(key => {
+    store.states[key] = initialState[key];
+  });
+  return store;
+}
+
+export function mapStates(mapper) {
+  const res = {};
+  Object.keys(mapper).forEach(key => {
+    const value = mapper[key];
+    let fn;
+    if (typeof value === 'string') {
+      fn = function() {
+        return this.store.states[value];
+      };
+    } else if (typeof value === 'function') {
+      fn = function() {
+        return value.call(this, this.store.states);
+      };
+    } else {
+      console.error('invalid value type');
+    }
+    if (fn) {
+      res[key] = fn;
+    }
+  });
+  return res;
+};
diff --git a/packages/table/src/store/index.js b/packages/table/src/store/index.js
new file mode 100644
index 00000000000..266752b0326
--- /dev/null
+++ b/packages/table/src/store/index.js
@@ -0,0 +1,155 @@
+import Vue from 'vue';
+import Watcher from './watcher';
+import { arrayFind } from 'element-ui/src/utils/util';
+
+Watcher.prototype.mutations = {
+  setData(states, data) {
+    const dataInstanceChanged = states._data !== data;
+    states._data = data;
+
+    this.execQuery();
+    // 数据变化，更新部分数据。
+    // 没有使用 computed，而是手动更新部分数据 https://github.com/vuejs/vue/issues/6660#issuecomment-331417140
+    this.updateCurrentRow();
+    this.updateExpandRows();
+    if (!states.reserveSelection) {
+      if (dataInstanceChanged) {
+        this.clearSelection();
+      } else {
+        this.cleanSelection();
+      }
+    } else {
+      this.assertRowKey();
+      this.updateSelectionByRowKey();
+    }
+    this.updateAllSelected();
+
+    this.updateTableScrollY();
+  },
+
+  insertColumn(states, column, index, parent) {
+    let array = states._columns;
+    if (parent) {
+      array = parent.children;
+      if (!array) array = parent.children = [];
+    }
+
+    if (typeof index !== 'undefined') {
+      array.splice(index, 0, column);
+    } else {
+      array.push(column);
+    }
+
+    if (column.type === 'selection') {
+      states.selectable = column.selectable;
+      states.reserveSelection = column.reserveSelection;
+    }
+
+    if (this.table.$ready) {
+      this.updateColumns(); // hack for dynamics insert column
+      this.scheduleLayout();
+    }
+  },
+
+  removeColumn(states, column, parent) {
+    let array = states._columns;
+    if (parent) {
+      array = parent.children;
+      if (!array) array = parent.children = [];
+    }
+    if (array) {
+      array.splice(array.indexOf(column), 1);
+    }
+
+    if (this.table.$ready) {
+      this.updateColumns(); // hack for dynamics remove column
+      this.scheduleLayout();
+    }
+  },
+
+  sort(states, options) {
+    const { prop, order } = options;
+    if (prop) {
+      // TODO：nextTick 是否有必要？
+      Vue.nextTick(() => {
+        const column = arrayFind(states.columns, column => column.property === prop);
+        if (column) {
+          column.order = order;
+          this.updateSort(column, prop, order);
+          this.commit('changeSortCondition');
+        }
+      });
+    }
+  },
+
+  changeSortCondition(states, options) {
+    // 修复 pr https://github.com/ElemeFE/element/pull/15012 导致的 bug
+    const { sortingColumn: column, sortProp: prop, sortOrder: order } = states;
+    if (order === null) {
+      states.sortingColumn = null;
+      states.sortProp = null;
+    }
+    const ingore = { filter: true };
+    this.execQuery(ingore);
+
+    if (!options || !options.silent) {
+      this.table.$emit('sort-change', {
+        column,
+        prop,
+        order
+      });
+    }
+
+    this.updateTableScrollY();
+  },
+
+  filterChange(states, options) {
+    let { column, values, silent } = options;
+    const newFilters = this.updateFilters(column, values);
+
+    this.execQuery();
+
+    if (!silent) {
+      this.table.$emit('filter-change', newFilters);
+    }
+
+    this.updateTableScrollY();
+  },
+
+  toggleAllSelection() {
+    this.toggleAllSelection();
+  },
+
+  rowSelectedChanged(states, row) {
+    this.toggleRowSelection(row);
+    this.updateAllSelected();
+  },
+
+  setHoverRow(states, row) {
+    states.hoverRow = row;
+  },
+
+  setCurrentRow(states, row) {
+    const oldCurrentRow = states.currentRow;
+    states.currentRow = row;
+
+    if (oldCurrentRow !== row) {
+      this.table.$emit('current-change', row, oldCurrentRow);
+    }
+  }
+};
+
+Watcher.prototype.commit = function(name, ...args) {
+  const mutations = this.mutations;
+  if (mutations[name]) {
+    mutations[name].apply(this, [this.states].concat(args));
+  } else {
+    throw new Error(`Action not found: ${name}`);
+  }
+};
+
+Watcher.prototype.updateTableScrollY = function() {
+  Vue.nextTick(this.table.updateScrollY);
+};
+
+export default Watcher;
diff --git a/packages/table/src/store/tree.js b/packages/table/src/store/tree.js
new file mode 100644
index 00000000000..c95cf3bd127
--- /dev/null
+++ b/packages/table/src/store/tree.js
@@ -0,0 +1,193 @@
+import { walkTreeNode, getRowIdentity } from '../util';
+
+export default {
+  data() {
+    return {
+      states: {
+        // defaultExpandAll 存在于 expand.js 中，这里不重复添加
+        // TODO: 拆分为独立的 TreeTale，在 expand 中，展开行的记录是放在 expandRows 中，统一用法
+        expandRowKeys: [],
+        treeData: {},
+        indent: 16,
+        lazy: false,
+        lazyTreeNodeMap: {},
+        lazyColumnIdentifier: 'hasChildren',
+        childrenColumnName: 'children'
+      }
+    };
+  },
+
+  computed: {
+    // 嵌入型的数据，watch 无法是检测到变化 https://github.com/ElemeFE/element/issues/14998
+    // TODO: 使用 computed 解决该问题，是否会造成性能问题？
+    // @return { id: { level, children } }
+    normalizedData() {
+      if (!this.states.rowKey) return {};
+      const data = this.states.data || [];
+      return this.normalize(data);
+    },
+    // @return { id: { children } }
+    // 针对懒加载的情形，不处理嵌套数据
+    normalizedLazyNode() {
+      const { rowKey, lazyTreeNodeMap, lazyColumnIdentifier } = this.states;
+      const keys = Object.keys(lazyTreeNodeMap);
+      const res = {};
+      if (!keys.length) return res;
+      keys.forEach(key => {
+        if (lazyTreeNodeMap[key].length) {
+          const item = { children: [] };
+          lazyTreeNodeMap[key].forEach(row => {
+            const currentRowKey = getRowIdentity(row, rowKey);
+            item.children.push(currentRowKey);
+            if (row[lazyColumnIdentifier] && !res[currentRowKey]) {
+              res[currentRowKey] = { children: [] };
+            }
+          });
+          res[key] = item;
+        }
+      });
+      return res;
+    }
+  },
+
+  watch: {
+    normalizedData: 'updateTreeData',
+    // expandRowKeys 在 TreeTable 中也有使用
+    expandRowKeys: 'updateTreeData',
+    normalizedLazyNode: 'updateTreeData'
+  },
+
+  methods: {
+    normalize(data) {
+      const { childrenColumnName, lazyColumnIdentifier, rowKey, lazy } = this.states;
+      const res = {};
+      walkTreeNode(data, (parent, children, level) => {
+        const parentId = getRowIdentity(parent, rowKey);
+        if (Array.isArray(children)) {
+          res[parentId] = {
+            children: children.map(row => getRowIdentity(row, rowKey)),
+            level
+          };
+        } else if (lazy) {
+          // 当 children 不存在且 lazy 为 true，该节点即为懒加载的节点
+          res[parentId] = {
+            children: [],
+            lazy: true,
+            level
+          };
+        }
+      }, childrenColumnName, lazyColumnIdentifier);
+      return res;
+    },
+
+    updateTreeData() {
+      const nested = this.normalizedData;
+      const normalizedLazyNode = this.normalizedLazyNode;
+      const keys = Object.keys(nested);
+      if (!keys.length) return;
+      const { treeData: oldTreeData, defaultExpandAll, expandRowKeys, lazy } = this.states;
+      const newTreeData = {};
+      const rootLazyRowKeys = [];
+      const getExpanded = (oldValue, key) => {
+        const included = defaultExpandAll || (expandRowKeys && expandRowKeys.indexOf(key) !== -1);
+        return !!((oldValue && oldValue.expanded) || included);
+      };
+      // 合并 expanded 与 display，确保数据刷新后，状态不变
+      keys.forEach(key => {
+        const oldValue = oldTreeData[key];
+        const newValue = { ...nested[key] };
+        newValue.expanded = getExpanded(oldValue, key);
+        if (newValue.lazy) {
+          const { loaded = false, loading = false } = oldValue || {};
+          newValue.loaded = !!loaded;
+          newValue.loading = !!loading;
+          rootLazyRowKeys.push(key);
+        }
+        newTreeData[key] = newValue;
+      });
+      // 根据懒加载数据更新 treeData
+      const lazyKeys = Object.keys(normalizedLazyNode);
+      if (lazy && lazyKeys.length && rootLazyRowKeys.length) {
+        lazyKeys.forEach(key => {
+          const oldValue = oldTreeData[key];
+          const lazyNodeChildren = normalizedLazyNode[key].children;
+          if (rootLazyRowKeys.indexOf(key) !== -1) {
+            // 懒加载的 root 节点，更新一下原有的数据，原来的 children 一定是空数组
+            if (newTreeData[key].children.length !== 0) {
+              throw new Error('[ElTable]children must be an empty array.');
+            }
+            newTreeData[key].children = lazyNodeChildren;
+          } else {
+            const { loaded = false, loading = false } = oldValue || {};
+            newTreeData[key] = {
+              loaded: !!loaded,
+              loading: !!loading,
+              expanded: getExpanded(oldValue, key),
+              children: lazyNodeChildren,
+              level: ''
+            };
+          }
+        });
+      }
+      this.states.treeData = newTreeData;
+      this.updateTableScrollY();
+    },
+
+    updateTreeExpandKeys(value) {
+      // 仅仅在包含嵌套数据时才去更新
+      if (Object.keys(this.normalizedData).length) {
+        this.states.expandRowKeys = value;
+        this.updateTreeData();
+      }
+    },
+
+    toggleTreeExpansion(row, expanded) {
+      this.assertRowKey();
+
+      const { rowKey, treeData } = this.states;
+      const id = getRowIdentity(row, rowKey);
+      const data = id && treeData[id];
+      const oldExpanded = treeData[id].expanded;
+      if (id && data && ('expanded' in data)) {
+        expanded = typeof expanded === 'undefined' ? !data.expanded : expanded;
+        treeData[id].expanded = expanded;
+        if (oldExpanded !== expanded) {
+          this.table.$emit('expand-change', row, expanded);
+        }
+        this.updateTableScrollY();
+      }
+    },
+
+    loadOrToggle(row) {
+      this.assertRowKey();
+      const { lazy, treeData, rowKey } = this.states;
+      const id = getRowIdentity(row, rowKey);
+      const data = treeData[id];
+      if (lazy && data && ('loaded' in data) && !data.loaded) {
+        this.loadData(row, id, data);
+      } else {
+        this.toggleTreeExpansion(row);
+      }
+    },
+
+    loadData(row, key, treeNode) {
+      const { load } = this.table;
+      const { lazyTreeNodeMap, treeData } = this.states;
+      if (load && !treeData[key].loaded) {
+        treeData[key].loading = true;
+        load(row, treeNode, (data) => {
+          if (!Array.isArray(data)) {
+            throw new Error('[ElTable] data must be an array');
+          }
+          treeData[key].loading = false;
+          treeData[key].loaded = true;
+          treeData[key].expanded = true;
+          if (data.length) {
+            this.$set(lazyTreeNodeMap, key, data);
+          }
+          this.table.$emit('expand-change', row, true);
+        });
+      }
+    }
+  }
+};
diff --git a/packages/table/src/store/watcher.js b/packages/table/src/store/watcher.js
new file mode 100644
index 00000000000..b1276e72d47
--- /dev/null
+++ b/packages/table/src/store/watcher.js
@@ -0,0 +1,388 @@
+import Vue from 'vue';
+import debounce from 'throttle-debounce/debounce';
+import merge from 'element-ui/src/utils/merge';
+import { getKeysMap, getRowIdentity, getColumnById, getColumnByKey, orderBy, toggleRowStatus } from '../util';
+import expand from './expand';
+import current from './current';
+import tree from './tree';
+
+const sortData = (data, states) => {
+  const sortingColumn = states.sortingColumn;
+  if (!sortingColumn || typeof sortingColumn.sortable === 'string') {
+    return data;
+  }
+  return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
+};
+
+const doFlattenColumns = (columns) => {
+  const result = [];
+  columns.forEach((column) => {
+    if (column.children) {
+      result.push.apply(result, doFlattenColumns(column.children));
+    } else {
+      result.push(column);
+    }
+  });
+  return result;
+};
+
+export default Vue.extend({
+  data() {
+    return {
+      states: {
+        // 3.0 版本后要求必须设置该属性
+        rowKey: null,
+
+        // 渲染的数据来源，是对 table 中的 data 过滤排序后的结果
+        data: [],
+
+        // 是否包含固定列
+        isComplex: false,
+
+        // 列
+        _columns: [], // 不可响应的
+        originColumns: [],
+        columns: [],
+        fixedColumns: [],
+        rightFixedColumns: [],
+        leafColumns: [],
+        fixedLeafColumns: [],
+        rightFixedLeafColumns: [],
+        leafColumnsLength: 0,
+        fixedLeafColumnsLength: 0,
+        rightFixedLeafColumnsLength: 0,
+
+        // 选择
+        isAllSelected: false,
+        selection: [],
+        reserveSelection: false,
+        selectOnIndeterminate: false,
+        selectable: null,
+
+        // 过滤
+        filters: {}, // 不可响应的
+        filteredData: null,
+
+        // 排序
+        sortingColumn: null,
+        sortProp: null,
+        sortOrder: null,
+
+        hoverRow: null,
+        currentRow: null
+      }
+    };
+  },
+
+  mixins: [expand, current, tree],
+
+  methods: {
+    // 检查 rowKey 是否存在
+    assertRowKey() {
+      const rowKey = this.states.rowKey;
+      if (!rowKey) throw new Error('[ElTable] prop row-key is required');
+    },
+
+    // 更新列
+    updateColumns() {
+      const states = this.states;
+      const _columns = states._columns || [];
+      states.fixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === 'left');
+      states.rightFixedColumns = _columns.filter((column) => column.fixed === 'right');
+
+      if (states.fixedColumns.length > 0 && _columns[0] && _columns[0].type === 'selection' && !_columns[0].fixed) {
+        _columns[0].fixed = true;
+        states.fixedColumns.unshift(_columns[0]);
+      }
+
+      const notFixedColumns = _columns.filter(column => !column.fixed);
+      states.originColumns = [].concat(states.fixedColumns).concat(notFixedColumns).concat(states.rightFixedColumns);
+
+      const leafColumns = doFlattenColumns(notFixedColumns);
+      const fixedLeafColumns = doFlattenColumns(states.fixedColumns);
+      const rightFixedLeafColumns = doFlattenColumns(states.rightFixedColumns);
+
+      states.leafColumnsLength = leafColumns.length;
+      states.fixedLeafColumnsLength = fixedLeafColumns.length;
+      states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
+
+      states.columns = [].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns);
+      states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;
+    },
+
+    // 更新 DOM
+    scheduleLayout(needUpdateColumns) {
+      if (needUpdateColumns) {
+        this.updateColumns();
+      }
+      this.table.debouncedUpdateLayout();
+    },
+
+    // 选择
+    isSelected(row) {
+      const { selection = [] } = this.states;
+      return selection.indexOf(row) > -1;
+    },
+
+    clearSelection() {
+      const states = this.states;
+      states.isAllSelected = false;
+      const oldSelection = states.selection;
+      if (states.selection.length) {
+        states.selection = [];
+      }
+      if (oldSelection.length > 0) {
+        this.table.$emit('selection-change', states.selection ? states.selection.slice() : []);
+      }
+    },
+
+    cleanSelection() {
+      const selection = this.states.selection || [];
+      const data = this.states.data;
+      const rowKey = this.states.rowKey;
+      let deleted;
+      if (rowKey) {
+        deleted = [];
+        const selectedMap = getKeysMap(selection, rowKey);
+        const dataMap = getKeysMap(data, rowKey);
+        for (let key in selectedMap) {
+          if (selectedMap.hasOwnProperty(key) && !dataMap[key]) {
+            deleted.push(selectedMap[key].row);
+          }
+        }
+      } else {
+        deleted = selection.filter((item) => {
+          return data.indexOf(item) === -1;
+        });
+      }
+
+      deleted.forEach((deletedItem) => {
+        selection.splice(selection.indexOf(deletedItem), 1);
+      });
+
+      if (deleted.length) {
+        this.table.$emit('selection-change', selection ? selection.slice() : []);
+      }
+    },
+
+    toggleRowSelection(row, selected) {
+      const changed = toggleRowStatus(this.states.selection, row, selected);
+      if (changed) {
+        const newSelection = this.states.selection ? this.states.selection.slice() : [];
+        this.table.$emit('select', newSelection, row);
+        this.table.$emit('selection-change', newSelection);
+      }
+    },
+
+    toggleAllSelection: debounce(10, function() {
+      const states = this.states;
+      const { data = [], selection } = states;
+      // when only some rows are selected (but not all), select or deselect all of them
+      // depending on the value of selectOnIndeterminate
+      const value = states.selectOnIndeterminate
+        ? !states.isAllSelected
+        : !(states.isAllSelected || selection.length);
+      states.isAllSelected = value;
+
+      let selectionChanged = false;
+      data.forEach((row, index) => {
+        if (states.selectable) {
+          if (states.selectable.call(null, row, index) && toggleRowStatus(selection, row, value)) {
+            selectionChanged = true;
+          }
+        } else {
+          if (toggleRowStatus(selection, row, value)) {
+            selectionChanged = true;
+          }
+        }
+      });
+
+      if (selectionChanged) {
+        this.table.$emit('selection-change', selection ? selection.slice() : []);
+      }
+      this.table.$emit('select-all', selection);
+    }),
+
+    updateSelectionByRowKey() {
+      const states = this.states;
+      const { selection, rowKey, data = [] } = states;
+      const selectedMap = getKeysMap(selection, rowKey);
+      // TODO：这里的代码可以优化
+      states.selection = data.reduce((prev, row) => {
+        const rowId = getRowIdentity(row, rowKey);
+        const rowInfo = selectedMap[rowId];
+        if (rowInfo) {
+          prev.push(row);
+        }
+        return prev;
+      }, []);
+    },
+
+    updateAllSelected() {
+      const states = this.states;
+      const { selection, rowKey, selectable } = states;
+      // data 为 null 时，结构时的默认值会被忽略
+      const data = states.data || [];
+      if (data.length === 0) {
+        states.isAllSelected = false;
+        return;
+      }
+
+      let selectedMap;
+      if (rowKey) {
+        selectedMap = getKeysMap(selection, rowKey);
+      }
+      const isSelected = function(row) {
+        if (selectedMap) {
+          return !!selectedMap[getRowIdentity(row, rowKey)];
+        } else {
+          return selection.indexOf(row) !== -1;
+        }
+      };
+      let isAllSelected = true;
+      let selectedCount = 0;
+      for (let i = 0, j = data.length; i < j; i++) {
+        const item = data[i];
+        const isRowSelectable = selectable && selectable.call(null, item, i);
+        if (!isSelected(item)) {
+          if (!selectable || isRowSelectable) {
+            isAllSelected = false;
+            break;
+          }
+        } else {
+          selectedCount++;
+        }
+      }
+
+      if (selectedCount === 0) isAllSelected = false;
+      states.isAllSelected = isAllSelected;
+    },
+
+    // 过滤与排序
+    updateFilters(columns, values) {
+      if (!Array.isArray(columns)) {
+        columns = [columns];
+      }
+      const states = this.states;
+      const filters = {};
+      columns.forEach(col => {
+        states.filters[col.id] = values;
+        filters[col.columnKey || col.id] = values;
+      });
+
+      return filters;
+    },
+
+    updateSort(column, prop, order) {
+      this.states.sortingColumn = column;
+      this.states.sortProp = prop;
+      this.states.sortOrder = order;
+    },
+
+    execFilter() {
+      const states = this.states;
+      const { _data, filters } = states;
+      let data = _data;
+
+      Object.keys(filters).forEach((columnId) => {
+        const values = states.filters[columnId];
+        if (!values || values.length === 0) return;
+        const column = getColumnById(this.states, columnId);
+        if (column && column.filterMethod) {
+          data = data.filter((row) => {
+            return values.some(value => column.filterMethod.call(null, value, row, column));
+          });
+        }
+      });
+
+      states.filteredData = data;
+      // states.data = data;
+    },
+
+    execSort() {
+      const states = this.states;
+      states.data = sortData(states.filteredData, states);
+    },
+
+    // 根据 filters 与 sort 去过滤 data
+    execQuery(ignore) {
+      if (!(ignore && ignore.filter)) {
+        this.execFilter();
+      }
+      this.execSort();
+    },
+
+    clearFilter(columnKeys) {
+      const states = this.states;
+      const { tableHeader, fixedTableHeader, rightFixedTableHeader } = this.table.$refs;
+
+      let panels = {};
+      if (tableHeader) panels = merge(panels, tableHeader.filterPanels);
+      if (fixedTableHeader) panels = merge(panels, fixedTableHeader.filterPanels);
+      if (rightFixedTableHeader) panels = merge(panels, rightFixedTableHeader.filterPanels);
+
+      const keys = Object.keys(panels);
+      if (!keys.length) return;
+
+      if (typeof columnKeys === 'string') {
+        columnKeys = [columnKeys];
+      }
+
+      if (Array.isArray(columnKeys)) {
+        const columns = columnKeys.map(key => getColumnByKey(states, key));
+        keys.forEach(key => {
+          const column = columns.find(col => col.id === key);
+          if (column) {
+            // TODO: 优化这里的代码
+            panels[key].filteredValue = [];
+          }
+        });
+        this.commit('filterChange', {
+          column: columns,
+          values: [],
+          silent: true,
+          multi: true
+        });
+      } else {
+        keys.forEach(key => {
+          // TODO: 优化这里的代码
+          panels[key].filteredValue = [];
+        });
+
+        states.filters = {};
+        this.commit('filterChange', {
+          column: {},
+          values: [],
+          silent: true
+        });
+      }
+    },
+
+    clearSort() {
+      const states = this.states;
+      if (!states.sortingColumn) return;
+
+      this.updateSort(null, null, null);
+      this.commit('changeSortCondition', {
+        silent: true
+      });
+    },
+
+    // 适配层，expand-row-keys 在 Expand 与 TreeTable 中都有使用
+    setExpandRowKeysAdapter(val) {
+      // 这里会触发额外的计算，但为了兼容性，暂时这么做
+      this.setExpandRowKeys(val);
+      this.updateTreeExpandKeys(val);
+    },
+
+    // 展开行与 TreeTable 都要使用
+    toggleRowExpansionAdapter(row, expanded) {
+      const hasExpandColumn = this.states.columns.some(({ type }) => type === 'expand');
+      if (hasExpandColumn) {
+        this.toggleRowExpansion(row, expanded);
+      } else {
+        this.toggleTreeExpansion(row, expanded);
+      }
+    }
+  }
+});
diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
index 1a5720ceace..52898413c89 100644
--- a/packages/table/src/table-body.js
+++ b/packages/table/src/table-body.js
@@ -1,9 +1,11 @@
+import { arrayFindIndex } from 'element-ui/src/utils/util';
 import { getCell, getColumnByCell, getRowIdentity } from './util';
 import { getStyle, hasClass, removeClass, addClass } from 'element-ui/src/utils/dom';
 import ElCheckbox from 'element-ui/packages/checkbox';
 import ElTooltip from 'element-ui/packages/tooltip';
 import debounce from 'throttle-debounce/debounce';
 import LayoutObserver from './layout-observer';
+import { mapStates } from './store/helper';
 
 export default {
   name: 'ElTableBody',
@@ -28,30 +30,7 @@ export default {
   },
 
   render(h) {
-    const columnsHidden = this.columns.map((column, index) => this.isColumnHidden(index));
-    let rows = this.data;
-    if (this.store.states.lazy && Object.keys(this.store.states.lazyTreeNodeMap).length) {
-      rows = rows.reduce((prev, item) => {
-        prev.push(item);
-        const rowKey = this.store.table.getRowKey(item);
-        const parent = this.store.states.treeData[rowKey];
-        if (parent && parent.children && parent.hasChildren) {
-          const tmp = [];
-          const traverse = (children) => {
-            if (!children) return;
-            children.forEach(key => {
-              tmp.push(this.store.states.lazyTreeNodeMap[key]);
-              if (this.store.states.treeData[key]) {
-                traverse(this.store.states.treeData[key].children);
-              }
-            });
-          };
-          traverse(parent.children);
-          prev = prev.concat(tmp);
-        }
-        return prev;
-      }, []);
-    }
+    const data = this.data || [];
     return (
       <table
         class="el-table__body"
@@ -60,93 +39,16 @@ export default {
         border="0">
         <colgroup>
           {
-            this._l(this.columns, column => <col name={ column.id } />)
+            this.columns.map(column => <col name={ column.id } key={column.id} />)
           }
         </colgroup>
         <tbody>
           {
-            this._l(rows, (row, $index) => {
-              const rowKey = this.table.rowKey ? this.getKeyOfRow(row, $index) : $index;
-              const treeNode = this.treeData[rowKey];
-              const rowClasses = this.getRowClass(row, $index);
-              if (treeNode) {
-                rowClasses.push('el-table__row--level-' + treeNode.level);
-              }
-              const tr = (<tr
-                v-show={ treeNode ? treeNode.display : true }
-                style={ this.rowStyle ? this.getRowStyle(row, $index) : null }
-                key={ rowKey }
-                on-dblclick={ ($event) => this.handleDoubleClick($event, row) }
-                on-click={ ($event) => this.handleClick($event, row) }
-                on-contextmenu={ ($event) => this.handleContextMenu($event, row) }
-                on-mouseenter={ _ => this.handleMouseEnter($index) }
-                on-mouseleave={ _ => this.handleMouseLeave() }
-                class={ rowClasses }>
-                {
-                  this._l(this.columns, (column, cellIndex) => {
-                    const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
-                    if (!rowspan || !colspan) {
-                      return '';
-                    } else {
-                      const columnData = { ...column };
-                      if (colspan !== 1) {
-                        columnData.realWidth = columnData.realWidth * colspan;
-                      }
-                      const data = {
-                        store: this.store,
-                        _self: this.context || this.table.$vnode.context,
-                        column: columnData,
-                        row,
-                        $index
-                      };
-                      if (cellIndex === this.firstDefaultColumnIndex && treeNode) {
-                        data.treeNode = {
-                          hasChildren: treeNode.hasChildren || (treeNode.children && treeNode.children.length),
-                          expanded: treeNode.expanded,
-                          indent: treeNode.level * this.treeIndent,
-                          level: treeNode.level,
-                          loaded: treeNode.loaded,
-                          rowKey
-                        };
-                      }
-                      return (
-                        <td
-                          style={ this.getCellStyle($index, cellIndex, row, column) }
-                          class={ this.getCellClass($index, cellIndex, row, column) }
-                          rowspan={ rowspan }
-                          colspan={ colspan }
-                          on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
-                          on-mouseleave={ this.handleCellMouseLeave }>
-                          {
-                            column.renderCell.call(
-                              this._renderProxy,
-                              h,
-                              data,
-                              columnsHidden[cellIndex]
-                            )
-                          }
-                        </td>
-                      );
-                    }
-                  })
-                }
-              </tr>);
-              if (this.hasExpandColumn && this.store.isRowExpanded(row)) {
-                return [
-                  tr,
-                  <tr>
-                    <td colspan={ this.columns.length } class="el-table__expanded-cell">
-                      { this.table.renderExpanded ? this.table.renderExpanded(h, { row, $index, store: this.store }) : ''}
-                    </td>
-                  </tr>
-                ];
-              } else {
-                return tr;
-              }
-            }).concat(
-              <el-tooltip effect={ this.table.tooltipEffect } placement="top" ref="tooltip" content={ this.tooltipContent }></el-tooltip>
-            )
+            data.reduce((acc, row) => {
+              return acc.concat(this.wrappedRowRender(row, acc.length));
+            }, [])
           }
+          <el-tooltip effect={ this.table.tooltipEffect } placement="top" ref="tooltip" content={ this.tooltipContent }></el-tooltip>
         </tbody>
       </table>
     );
@@ -157,53 +59,20 @@ export default {
       return this.$parent;
     },
 
-    data() {
-      return this.store.states.data;
-    },
-
-    treeData() {
-      return this.store.states.treeData;
-    },
-
-    columnsCount() {
-      return this.store.states.columns.length;
-    },
-
-    leftFixedLeafCount() {
-      return this.store.states.fixedLeafColumnsLength;
-    },
-
-    rightFixedLeafCount() {
-      return this.store.states.rightFixedLeafColumnsLength;
-    },
-
-    leftFixedCount() {
-      return this.store.states.fixedColumns.length;
-    },
-
-    rightFixedCount() {
-      return this.store.states.rightFixedColumns.length;
-    },
-
-    columns() {
-      return this.store.states.columns;
-    },
-
-    hasExpandColumn() {
-      return this.columns.some(({ type }) => type === 'expand');
-    },
+    ...mapStates({
+      data: 'data',
+      columns: 'columns',
+      treeIndent: 'indent',
+      leftFixedLeafCount: 'fixedLeafColumnsLength',
+      rightFixedLeafCount: 'rightFixedLeafColumnsLength',
+      columnsCount: states => states.columns.length,
+      leftFixedCount: states => states.fixedColumns.length,
+      rightFixedCount: states => states.rightFixedColumns.length,
+      hasExpandColumn: states => states.columns.some(({ type }) => type === 'expand')
+    }),
 
     firstDefaultColumnIndex() {
-      for (let index = 0; index < this.columns.length; index++) {
-        if (this.columns[index].type === 'default') {
-          return index;
-        }
-      }
-      return 0;
-    },
-
-    treeIndent() {
-      return this.store.states.indent;
+      return arrayFindIndex(this.columns, ({ type }) => type === 'default');
     }
   },
 
@@ -211,16 +80,22 @@ export default {
     // don't trigger getter of currentRow in getCellClass. see https://jsfiddle.net/oe2b4hqt/
     // update DOM manually. see https://github.com/ElemeFE/element/pull/13954/files#diff-9b450c00d0a9dec0ffad5a3176972e40
     'store.states.hoverRow'(newVal, oldVal) {
-      if (!this.store.states.isComplex) return;
-      const rows = this.$el.querySelectorAll('.el-table__row');
-      const oldRow = rows[oldVal];
-      const newRow = rows[newVal];
-      if (oldRow) {
-        removeClass(oldRow, 'hover-row');
-      }
-      if (newRow) {
-        addClass(newRow, 'hover-row');
+      if (!this.store.states.isComplex || this.$isServer) return;
+      let raf = window.requestAnimationFrame;
+      if (!raf) {
+        raf = (fn) => setTimeout(fn, 16);
       }
+      raf(() => {
+        const rows = this.$el.querySelectorAll('.el-table__row');
+        const oldRow = rows[oldVal];
+        const newRow = rows[newVal];
+        if (oldRow) {
+          removeClass(oldRow, 'hover-row');
+        }
+        if (newRow) {
+          addClass(newRow, 'hover-row');
+        }
+      });
     }
   },
 
@@ -256,7 +131,6 @@ export default {
     getSpan(row, column, rowIndex, columnIndex) {
       let rowspan = 1;
       let colspan = 1;
-
       const fn = this.table.spanMethod;
       if (typeof fn === 'function') {
         const result = fn({
@@ -265,7 +139,6 @@ export default {
           rowIndex,
           columnIndex
         });
-
         if (Array.isArray(result)) {
           rowspan = result[0];
           colspan = result[1];
@@ -274,11 +147,7 @@ export default {
           colspan = result.colspan;
         }
       }
-
-      return {
-        rowspan,
-        colspan
-      };
+      return { rowspan, colspan };
     },
 
     getRowStyle(row, rowIndex) {
@@ -289,7 +158,7 @@ export default {
           rowIndex
         });
       }
-      return rowStyle;
+      return rowStyle || null;
     },
 
     getRowClass(row, rowIndex) {
@@ -353,6 +222,14 @@ export default {
       return classes.join(' ');
     },
 
+    getColspanRealWidth(columns, colspan, index) {
+      if (colspan < 1) {
+        return columns[index].realWidth;
+      }
+      const widthArr = columns.map(({ realWidth }) => realWidth).slice(index, index + colspan);
+      return widthArr.reduce((acc, width) => acc + width, -1);
+    },
+
     handleCellMouseEnter(event, row) {
       const table = this.table;
       const cell = getCell(event);
@@ -401,13 +278,13 @@ export default {
       this.table.$emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
     },
 
-    handleMouseEnter(index) {
+    handleMouseEnter: debounce(30, function(index) {
       this.store.commit('setHoverRow', index);
-    },
+    }),
 
-    handleMouseLeave() {
+    handleMouseLeave: debounce(30, function() {
       this.store.commit('setHoverRow', null);
-    },
+    }),
 
     handleContextMenu(event, row) {
       this.handleEvent(event, row, 'contextmenu');
@@ -435,9 +312,169 @@ export default {
       table.$emit(`row-${name}`, row, column, event);
     },
 
-    handleExpandClick(row, e) {
-      e.stopPropagation();
-      this.store.toggleRowExpansion(row);
+    rowRender(row, $index, treeRowData) {
+      const { treeIndent, columns, firstDefaultColumnIndex } = this;
+      const columnsHidden = columns.map((column, index) => this.isColumnHidden(index));
+      const rowClasses = this.getRowClass(row, $index);
+      let display = true;
+      if (treeRowData) {
+        rowClasses.push('el-table__row--level-' + treeRowData.level);
+        display = treeRowData.display;
+      }
+      return (<tr
+        v-show={display}
+        style={ this.getRowStyle(row, $index) }
+        class={ rowClasses }
+        key={ this.getKeyOfRow(row, $index) }
+        on-dblclick={ ($event) => this.handleDoubleClick($event, row) }
+        on-click={ ($event) => this.handleClick($event, row) }
+        on-contextmenu={ ($event) => this.handleContextMenu($event, row) }
+        on-mouseenter={ _ => this.handleMouseEnter($index) }
+        on-mouseleave={ this.handleMouseLeave }>
+        {
+          columns.map((column, cellIndex) => {
+            const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
+            if (!rowspan || !colspan) {
+              return null;
+            }
+            const columnData = { ...column };
+            columnData.realWidth = this.getColspanRealWidth(columns, colspan, cellIndex);
+            const data = {
+              store: this.store,
+              _self: this.context || this.table.$vnode.context,
+              column: columnData,
+              row,
+              $index
+            };
+            if (cellIndex === firstDefaultColumnIndex && treeRowData) {
+              data.treeNode = {
+                indent: treeRowData.level * treeIndent,
+                level: treeRowData.level
+              };
+              // TODO: 优化这里的逻辑
+              if (typeof treeRowData.expanded === 'boolean') {
+                data.treeNode.expanded = treeRowData.expanded;
+                // 表明是懒加载
+                if ('loading' in treeRowData) {
+                  data.treeNode.loading = treeRowData.loading;
+                }
+                if ('noLazyChildren' in treeRowData) {
+                  data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
+                }
+              }
+            }
+            return (
+              <td
+                style={ this.getCellStyle($index, cellIndex, row, column) }
+                class={ this.getCellClass($index, cellIndex, row, column) }
+                rowspan={ rowspan }
+                colspan={ colspan }
+                on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
+                on-mouseleave={ this.handleCellMouseLeave }>
+                {
+                  column.renderCell.call(
+                    this._renderProxy,
+                    this.$createElement,
+                    data,
+                    columnsHidden[cellIndex]
+                  )
+                }
+              </td>
+            );
+          })
+        }
+      </tr>);
+    },
+
+    wrappedRowRender(row, $index) {
+      const store = this.store;
+      const { isRowExpanded, assertRowKey } = store;
+      const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
+      if (this.hasExpandColumn && isRowExpanded(row)) {
+        const renderExpanded = this.table.renderExpanded;
+        const tr = this.rowRender(row, $index);
+        if (!renderExpanded) {
+          console.error('[Element Error]renderExpanded is required.');
+          return tr;
+        }
+        // 使用二维数组，避免修改 $index
+        return [[
+          tr,
+          <tr key={'expanded-row__' + tr.key}>
+            <td colspan={ this.columnsCount } class="el-table__expanded-cell">
+              { renderExpanded(this.$createElement, { row, $index, store: this.store }) }
+            </td>
+          </tr>]];
+      } else if (Object.keys(treeData).length) {
+        assertRowKey();
+        // TreeTable 时，rowKey 必须由用户设定，不使用 getKeyOfRow 计算
+        // 在调用 rowRender 函数时，仍然会计算 rowKey，不太好的操作
+        const key = getRowIdentity(row, rowKey);
+        let cur = treeData[key];
+        let treeRowData = null;
+        if (cur) {
+          treeRowData = {
+            expanded: cur.expanded,
+            level: cur.level,
+            display: true
+          };
+          if (typeof cur.loaded === 'boolean' && cur.loaded) {
+            treeRowData.noLazyChildren = !(cur.children && cur.children.length);
+          }
+          if (typeof cur.loading === 'boolean') {
+            treeRowData.loading = cur.loading;
+          }
+        }
+        const tmp = [this.rowRender(row, $index, treeRowData)];
+        // 渲染嵌套数据
+        if (cur) {
+          // currentRow 记录的是 index，所以还需主动增加 TreeTable 的 index
+          let i = 0;
+          const traverse = (children, parent) => {
+            if (!(children && children.length && parent)) return;
+            children.forEach(node => {
+              // 父节点的 display 状态影响子节点的显示状态
+              const innerTreeRowData = {
+                display: parent.display && parent.expanded,
+                level: parent.level + 1
+              };
+              const childKey = getRowIdentity(node, rowKey);
+              if (childKey === undefined || childKey === null) {
+                throw new Error('for nested data item, row-key is required.');
+              }
+              cur = { ...treeData[childKey] };
+              // 对于当前节点，分成有无子节点两种情况。
+              // 如果包含子节点的，设置 expanded 属性。
+              // 对于它子节点的 display 属性由它本身的 expanded 与 display 共同决定。
+              if (cur) {
+                innerTreeRowData.expanded = cur.expanded;
+                // 懒加载的某些节点，level 未知
+                cur.level = cur.level || innerTreeRowData.level;
+                cur.display = !!(cur.expanded && innerTreeRowData.display);
+                if (typeof cur.loaded === 'boolean' && cur.loaded) {
+                  innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
+                }
+                if (typeof cur.lazy === 'boolean') {
+                  innerTreeRowData.loading = cur.loading;
+                }
+              }
+              i++;
+              tmp.push(this.rowRender(node, $index + i, innerTreeRowData));
+              if (cur) {
+                const nodes = lazyTreeNodeMap[childKey] || node[childrenColumnName];
+                traverse(nodes, cur);
+              }
+            });
+          };
+          // 对于 root 节点，display 一定为 true
+          cur.display = true;
+          const nodes = lazyTreeNodeMap[key] || row[childrenColumnName];
+          traverse(nodes, cur);
+        }
+        return tmp;
+      } else {
+        return this.rowRender(row, $index);
+      }
     }
   }
 };
diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js
index 96773c121b2..1c309c328b2 100644
--- a/packages/table/src/table-column.js
+++ b/packages/table/src/table-column.js
@@ -1,141 +1,9 @@
+import { cellStarts, cellForced, defaultRenderCell, treeCellPrefix } from './config';
+import { mergeOptions, parseWidth, parseMinWidth, compose } from './util';
 import ElCheckbox from 'element-ui/packages/checkbox';
-import ElTag from 'element-ui/packages/tag';
-import objectAssign from 'element-ui/src/utils/merge';
-import { getPropByPath } from 'element-ui/src/utils/util';
 
 let columnIdSeed = 1;
 
-const defaults = {
-  default: {
-    order: ''
-  },
-  selection: {
-    width: 48,
-    minWidth: 48,
-    realWidth: 48,
-    order: '',
-    className: 'el-table-column--selection'
-  },
-  expand: {
-    width: 48,
-    minWidth: 48,
-    realWidth: 48,
-    order: ''
-  },
-  index: {
-    width: 48,
-    minWidth: 48,
-    realWidth: 48,
-    order: ''
-  }
-};
-
-const forced = {
-  selection: {
-    renderHeader: function(h, { store }) {
-      return <el-checkbox
-        disabled={ store.states.data && store.states.data.length === 0 }
-        indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
-        nativeOn-click={ this.toggleAllSelection }
-        value={ this.isAllSelected } />;
-    },
-    renderCell: function(h, { row, column, store, $index }) {
-      return <el-checkbox
-        nativeOn-click={ (event) => event.stopPropagation() }
-        value={ store.isSelected(row) }
-        disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
-        on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
-    },
-    sortable: false,
-    resizable: false
-  },
-  index: {
-    renderHeader: function(h, { column }) {
-      return column.label || '#';
-    },
-    renderCell: function(h, { $index, column }) {
-      let i = $index + 1;
-      const index = column.index;
-
-      if (typeof index === 'number') {
-        i = $index + index;
-      } else if (typeof index === 'function') {
-        i = index($index);
-      }
-
-      return <div>{ i }</div>;
-    },
-    sortable: false
-  },
-  expand: {
-    renderHeader: function(h, { column }) {
-      return column.label || '';
-    },
-    renderCell: function(h, { row, store }, proxy) {
-      const expanded = store.states.expandRows.indexOf(row) > -1;
-      return <div class={ 'el-table__expand-icon ' + (expanded ? 'el-table__expand-icon--expanded' : '') }
-        on-click={ e => proxy.handleExpandClick(row, e) }>
-        <i class='el-icon el-icon-arrow-right'></i>
-      </div>;
-    },
-    sortable: false,
-    resizable: false,
-    className: 'el-table__expand-column'
-  }
-};
-
-const getDefaultColumn = function(type, options) {
-  const column = {};
-
-  objectAssign(column, defaults[type || 'default']);
-
-  for (let name in options) {
-    if (options.hasOwnProperty(name)) {
-      const value = options[name];
-      if (typeof value !== 'undefined') {
-        column[name] = value;
-      }
-    }
-  }
-
-  if (!column.minWidth) {
-    column.minWidth = 80;
-  }
-
-  column.realWidth = column.width === undefined ? column.minWidth : column.width;
-
-  return column;
-};
-
-const DEFAULT_RENDER_CELL = function(h, { row, column, $index }) {
-  const property = column.property;
-  const value = property && getPropByPath(row, property).v;
-  if (column && column.formatter) {
-    return column.formatter(row, column, value, $index);
-  }
-  return value;
-};
-
-const parseWidth = (width) => {
-  if (width !== undefined) {
-    width = parseInt(width, 10);
-    if (isNaN(width)) {
-      width = null;
-    }
-  }
-  return width;
-};
-
-const parseMinWidth = (minWidth) => {
-  if (minWidth !== undefined) {
-    minWidth = parseInt(minWidth, 10);
-    if (isNaN(minWidth)) {
-      minWidth = 80;
-    }
-  }
-  return minWidth;
-};
-
 export default {
   name: 'ElTableColumn',
 
@@ -153,7 +21,7 @@ export default {
     minWidth: {},
     renderHeader: Function,
     sortable: {
-      type: [String, Boolean],
+      type: [Boolean, String],
       default: false
     },
     sortMethod: Function,
@@ -162,7 +30,6 @@ export default {
       type: Boolean,
       default: true
     },
-    context: {},
     columnKey: String,
     align: String,
     headerAlign: String,
@@ -199,17 +66,6 @@ export default {
     };
   },
 
-  beforeCreate() {
-    this.row = {};
-    this.column = {};
-    this.$index = 0;
-  },
-
-  components: {
-    ElCheckbox,
-    ElTag
-  },
-
   computed: {
     owner() {
       let parent = this.$parent;
@@ -218,277 +74,247 @@ export default {
       }
       return parent;
     },
+
     columnOrTableParent() {
       let parent = this.$parent;
       while (parent && !parent.tableId && !parent.columnId) {
         parent = parent.$parent;
       }
       return parent;
-    }
-  },
-
-  created() {
-    this.customRender = this.$options.render;
-    this.$options.render = h => h('div', this.$slots.default);
-
-    let parent = this.columnOrTableParent;
-    let owner = this.owner;
-    this.isSubColumn = owner !== parent;
-    this.columnId = (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++;
-
-    let type = this.type;
-
-    const width = parseWidth(this.width);
-    const minWidth = parseMinWidth(this.minWidth);
-
-    let isColumnGroup = false;
-
-    let column = getDefaultColumn(type, {
-      id: this.columnId,
-      columnKey: this.columnKey,
-      label: this.label,
-      className: this.className,
-      labelClassName: this.labelClassName,
-      property: this.prop || this.property,
-      type,
-      renderCell: null,
-      renderHeader: this.renderHeader,
-      minWidth,
-      width,
-      isColumnGroup,
-      context: this.context,
-      align: this.align ? 'is-' + this.align : null,
-      headerAlign: this.headerAlign ? 'is-' + this.headerAlign : (this.align ? 'is-' + this.align : null),
-      sortable: this.sortable === '' ? true : this.sortable,
-      sortMethod: this.sortMethod,
-      sortBy: this.sortBy,
-      resizable: this.resizable,
-      showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
-      formatter: this.formatter,
-      selectable: this.selectable,
-      reserveSelection: this.reserveSelection,
-      fixed: this.fixed === '' ? true : this.fixed,
-      filterMethod: this.filterMethod,
-      filters: this.filters,
-      filterable: this.filters || this.filterMethod,
-      filterMultiple: this.filterMultiple,
-      filterOpened: false,
-      filteredValue: this.filteredValue || [],
-      filterPlacement: this.filterPlacement || '',
-      index: this.index,
-      sortOrders: this.sortOrders
-    });
-
-    let source = forced[type] || {};
-    Object.keys(source).forEach((prop) => {
-      let value = source[prop];
-      if (value !== undefined) {
-        if (prop === 'renderHeader') {
-          if (type === 'selection' && column[prop]) {
-            console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set render-header function.');
-          } else {
-            value = column[prop] || value;
-          }
-        }
-        column[prop] = prop === 'className' ? `${column[prop]} ${value}` : value;
-      }
-    });
-
-    // Deprecation warning for renderHeader property
-    if (this.renderHeader) {
-      console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
-    }
-
-    this.columnConfig = column;
+    },
 
-    let renderCell = column.renderCell;
-    let _self = this;
+    realWidth() {
+      return parseWidth(this.width);
+    },
 
-    if (type === 'expand') {
-      owner.renderExpanded = function(h, data) {
-        return _self.$scopedSlots.default
-          ? _self.$scopedSlots.default(data)
-          : _self.$slots.default;
-      };
+    realMinWidth() {
+      return parseMinWidth(this.minWidth);
+    },
 
-      column.renderCell = function(h, data) {
-        return <div class="cell">{ renderCell(h, data, this._renderProxy) }</div>;
-      };
+    realAlign() {
+      return this.align ? 'is-' + this.align : null;
+    },
 
-      return;
+    realHeaderAlign() {
+      return this.headerAlign ? 'is-' + this.headerAlign : this.realAlign;
     }
-
-    column.renderCell = function(h, data) {
-      if (_self.$scopedSlots.default) {
-        renderCell = () => _self.$scopedSlots.default(data);
-      }
-
-      if (!renderCell) {
-        renderCell = DEFAULT_RENDER_CELL;
-      }
-      const children = [
-        _self.renderTreeCell(data),
-        renderCell(h, data)
-      ];
-
-      return _self.showOverflowTooltip || _self.showTooltipWhenOverflow
-        ? <div class="cell el-tooltip" style={ {width: (data.column.realWidth || data.column.width) - 1 + 'px'} }>{ children }</div>
-        : (<div class="cell">
-          { children }
-        </div>);
-    };
   },
 
-  destroyed() {
-    if (!this.$parent) return;
-    const parent = this.$parent;
-    this.owner.store.commit('removeColumn', this.columnConfig, this.isSubColumn ? parent.columnConfig : null);
-  },
-
-  watch: {
-    label(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.label = newVal;
-      }
+  methods: {
+    getPropsData(...props) {
+      return props.reduce((prev, cur) => {
+        if (Array.isArray(cur)) {
+          cur.forEach((key) => {
+            prev[key] = this[key];
+          });
+        }
+        return prev;
+      }, {});
     },
 
-    prop(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.property = newVal;
-      }
+    getColumnElIndex(children, child) {
+      return [].indexOf.call(children, child);
     },
 
-    property(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.property = newVal;
+    setColumnWidth(column) {
+      if (this.realWidth) {
+        column.width = this.realWidth;
       }
-    },
-
-    filters(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.filters = newVal;
+      if (this.realMinWidth) {
+        column.minWidth = this.realMinWidth;
       }
-    },
-
-    filterMultiple(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.filterMultiple = newVal;
+      if (!column.minWidth) {
+        column.minWidth = 80;
       }
+      column.realWidth = column.width === undefined ? column.minWidth : column.width;
+      return column;
     },
 
-    align(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.align = newVal ? 'is-' + newVal : null;
-
-        if (!this.headerAlign) {
-          this.columnConfig.headerAlign = newVal ? 'is-' + newVal : null;
+    setColumnForcedProps(column) {
+      // 对于特定类型的 column，某些属性不允许设置
+      const type = column.type;
+      const source = cellForced[type] || {};
+      Object.keys(source).forEach(prop => {
+        let value = source[prop];
+        if (value !== undefined) {
+          column[prop] = prop === 'className' ? `${column[prop]} ${value}` : value;
         }
-      }
+      });
+      return column;
     },
 
-    headerAlign(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.headerAlign = 'is-' + (newVal ? newVal : this.align);
+    setColumnRenders(column) {
+      const specialTypes = Object.keys(cellForced);
+      // renderHeader 属性不推荐使用。
+      if (this.renderHeader) {
+        console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
+      } else if (specialTypes.indexOf(column.type) === -1) {
+        column.renderHeader = (h, scope) => {
+          const renderHeader = this.$scopedSlots.header;
+          return renderHeader ? renderHeader(scope) : column.label;
+        };
       }
-    },
 
-    width(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.width = parseWidth(newVal);
-        this.owner.store.scheduleLayout();
+      let originRenderCell = column.renderCell;
+      // TODO: 这里的实现调整
+      if (column.type === 'expand') {
+        // 对于展开行，renderCell 不允许配置的。在上一步中已经设置过，这里需要简单封装一下。
+        column.renderCell = (h, data) => (<div class="cell">
+          { originRenderCell(h, data) }
+        </div>);
+        this.owner.renderExpanded = (h, data) => {
+          return this.$scopedSlots.default
+            ? this.$scopedSlots.default(data)
+            : this.$slots.default;
+        };
+      } else {
+        originRenderCell = originRenderCell || defaultRenderCell;
+        // 对 renderCell 进行包装
+        column.renderCell = (h, data) => {
+          let children = null;
+          if (this.$scopedSlots.default) {
+            children = this.$scopedSlots.default(data);
+          } else {
+            children = originRenderCell(h, data);
+          }
+          const prefix = treeCellPrefix(h, data);
+          const props = {
+            class: 'cell',
+            style: {}
+          };
+          if (column.showOverflowTooltip) {
+            props.class += ' el-tooltip';
+            props.style = {width: (data.column.realWidth || data.column.width) - 1 + 'px'};
+          }
+          return (<div { ...props }>
+            { prefix }
+            { children }
+          </div>);
+        };
       }
+      return column;
     },
 
-    minWidth(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.minWidth = parseMinWidth(newVal);
-        this.owner.store.scheduleLayout();
-      }
+    registerNormalWatchers() {
+      const props = ['label', 'property', 'filters', 'filterMultiple', 'sortable', 'index', 'formatter', 'className', 'labelClassName'];
+      // 一些属性具有别名
+      const aliases = {
+        prop: 'property',
+        realAlign: 'align',
+        realHeaderAlign: 'headerAlign',
+        realWidth: 'width'
+      };
+      const allAliases = props.reduce((prev, cur) => {
+        prev[cur] = cur;
+        return prev;
+      }, aliases);
+
+      Object.keys(allAliases).forEach(key => {
+        const columnKey = aliases[key];
+
+        this.$watch(key, (newVal) => {
+          this.columnConfig[columnKey] = newVal;
+        });
+      });
     },
 
-    fixed(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.fixed = newVal;
-        this.owner.store.scheduleLayout(true);
-      }
-    },
+    registerComplexWatchers() {
+      const props = ['fixed'];
+      const aliases = {
+        realWidth: 'width',
+        realMinWidth: 'minWidth'
+      };
+      const allAliases = props.reduce((prev, cur) => {
+        prev[cur] = cur;
+        return prev;
+      }, aliases);
+
+      Object.keys(allAliases).forEach(key => {
+        const columnKey = aliases[key];
+
+        this.$watch(key, (newVal) => {
+          this.columnConfig[columnKey] = newVal;
+          const updateColumns = columnKey === 'fixed';
+          this.owner.store.scheduleLayout(updateColumns);
+        });
+      });
+    }
+  },
 
-    sortable(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.sortable = newVal;
-      }
-    },
+  components: {
+    ElCheckbox
+  },
 
-    index(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.index = newVal;
-      }
-    },
+  beforeCreate() {
+    this.row = {};
+    this.column = {};
+    this.$index = 0;
+    this.columnId = '';
+  },
 
-    formatter(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.formatter = newVal;
-      }
-    },
+  created() {
+    const parent = this.columnOrTableParent;
+    this.isSubColumn = this.owner !== parent;
+    this.columnId = (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++;
 
-    className(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.className = newVal;
-      }
-    },
+    const type = this.type || 'default';
+    const sortable = this.sortable === '' ? true : this.sortable;
+    const defaults = {
+      ...cellStarts[type],
+      id: this.columnId,
+      type: type,
+      property: this.prop || this.property,
+      align: this.realAlign,
+      headerAlign: this.realHeaderAlign,
+      showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
+      // filter 相关属性
+      filterable: this.filters || this.filterMethod,
+      filteredValue: [],
+      filterPlacement: '',
+      isColumnGroup: false,
+      filterOpened: false,
+      // sort 相关属性
+      sortable: sortable,
+      // index 列
+      index: this.index
+    };
 
-    labelClassName(newVal) {
-      if (this.columnConfig) {
-        this.columnConfig.labelClassName = newVal;
-      }
-    }
-  },
+    const basicProps = ['columnKey', 'label', 'className', 'labelClassName', 'type', 'renderHeader', 'resizable', 'formatter', 'fixed', 'resizable'];
+    const sortProps = ['sortMethod', 'sortBy', 'sortOrders'];
+    const selectProps = ['selectable', 'reserveSelection'];
+    const filterProps = ['filterMethod', 'filters', 'filterMultiple', 'filterOpened', 'filteredValue', 'filterPlacement'];
 
-  methods: {
-    renderTreeCell(data) {
-      if (!data.treeNode) return null;
-      const ele = [];
-      ele.push(<span class="el-table__indent" style={{'padding-left': data.treeNode.indent + 'px'}}></span>);
-      if (data.treeNode.hasChildren) {
-        ele.push(<div class={ ['el-table__expand-icon', data.treeNode.expanded ? 'el-table__expand-icon--expanded' : '']}
-          on-click={this.handleTreeExpandIconClick.bind(this, data)}>
-          <i class='el-icon el-icon-arrow-right'></i>
-        </div>);
-      } else {
-        ele.push(<span class="el-table__placeholder"></span>);
-      }
-      return ele;
-    },
+    let column = this.getPropsData(basicProps, sortProps, selectProps, filterProps);
+    column = mergeOptions(defaults, column);
 
-    handleTreeExpandIconClick(data, e) {
-      e.stopPropagation();
-      if (data.store.states.lazy && !data.treeNode.loaded) {
-        data.store.loadData(data.row, data.treeNode);
-      } else {
-        data.store.toggleTreeExpansion(data.treeNode.rowKey);
-      }
-    }
+    // 注意 compose 中函数执行的顺序是从右到左
+    const chains = compose(this.setColumnRenders, this.setColumnWidth, this.setColumnForcedProps);
+    column = chains(column);
+
+    this.columnConfig = column;
+
+    // 注册 watcher
+    this.registerNormalWatchers();
+    this.registerComplexWatchers();
   },
 
   mounted() {
     const owner = this.owner;
     const parent = this.columnOrTableParent;
-    let columnIndex;
+    const children = this.isSubColumn ? parent.$el.children : parent.$refs.hiddenColumns.children;
+    const columnIndex = this.getColumnElIndex(children, this.$el);
 
-    if (!this.isSubColumn) {
-      columnIndex = [].indexOf.call(parent.$refs.hiddenColumns.children, this.$el);
-    } else {
-      columnIndex = [].indexOf.call(parent.$el.children, this.$el);
-    }
+    owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
+  },
 
-    if (this.$scopedSlots.header) {
-      if (this.type === 'selection') {
-        console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set scoped-slot header.');
-      } else {
-        this.columnConfig.renderHeader = (h, scope) => this.$scopedSlots.header(scope);
-      }
-    }
+  destroyed() {
+    if (!this.$parent) return;
+    const parent = this.$parent;
+    this.owner.store.commit('removeColumn', this.columnConfig, this.isSubColumn ? parent.columnConfig : null);
+  },
 
-    owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
+  render(h) {
+    // slots 也要渲染，需要计算合并表头
+    return h('div', this.$slots.default);
   }
 };
diff --git a/packages/table/src/table-footer.js b/packages/table/src/table-footer.js
index 202555eb863..8d51c97da89 100644
--- a/packages/table/src/table-footer.js
+++ b/packages/table/src/table-footer.js
@@ -1,4 +1,5 @@
 import LayoutObserver from './layout-observer';
+import { mapStates } from './store/helper';
 
 export default {
   name: 'ElTableFooter',
@@ -49,7 +50,7 @@ export default {
         border="0">
         <colgroup>
           {
-            this._l(this.columns, column => <col name={ column.id } />)
+            this.columns.map(column => <col name={ column.id } key={column.id} />)
           }
           {
             this.hasGutter ? <col name="gutter" /> : ''
@@ -58,18 +59,17 @@ export default {
         <tbody class={ [{ 'has-gutter': this.hasGutter }] }>
           <tr>
             {
-              this._l(this.columns, (column, cellIndex) =>
-                <td
-                  colspan={ column.colSpan }
-                  rowspan={ column.rowSpan }
-                  class={ this.getRowClasses(column, cellIndex) }>
-                  <div class={ ['cell', column.labelClassName] }>
-                    {
-                      sums[cellIndex]
-                    }
-                  </div>
-                </td>
-              )
+              this.columns.map((column, cellIndex) => <td
+                key={cellIndex}
+                colspan={ column.colSpan }
+                rowspan={ column.rowSpan }
+                class={ this.getRowClasses(column, cellIndex) }>
+                <div class={ ['cell', column.labelClassName] }>
+                  {
+                    sums[cellIndex]
+                  }
+                </div>
+              </td>)
             }
             {
               this.hasGutter ? <th class="gutter"></th> : ''
@@ -104,37 +104,19 @@ export default {
       return this.$parent;
     },
 
-    isAllSelected() {
-      return this.store.states.isAllSelected;
-    },
-
-    columnsCount() {
-      return this.store.states.columns.length;
-    },
-
-    leftFixedCount() {
-      return this.store.states.fixedColumns.length;
-    },
-
-    leftFixedLeafCount() {
-      return this.store.states.fixedLeafColumnsLength;
-    },
-
-    rightFixedLeafCount() {
-      return this.store.states.rightFixedLeafColumnsLength;
-    },
-
-    rightFixedCount() {
-      return this.store.states.rightFixedColumns.length;
-    },
-
-    columns() {
-      return this.store.states.columns;
-    },
-
     hasGutter() {
       return !this.fixed && this.tableLayout.gutterWidth;
-    }
+    },
+
+    ...mapStates({
+      columns: 'columns',
+      isAllSelected: 'isAllSelected',
+      leftFixedLeafCount: 'fixedLeafColumnsLength',
+      rightFixedLeafCount: 'rightFixedLeafColumnsLength',
+      columnsCount: states => states.columns.length,
+      leftFixedCount: states => states.fixedColumns.length,
+      rightFixedCount: states => states.rightFixedColumns.length
+    })
   },
 
   methods: {
diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js
index cddb708e229..04bcd451e5e 100644
--- a/packages/table/src/table-header.js
+++ b/packages/table/src/table-header.js
@@ -1,9 +1,9 @@
+import Vue from 'vue';
 import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
 import ElCheckbox from 'element-ui/packages/checkbox';
-import ElTag from 'element-ui/packages/tag';
-import Vue from 'vue';
 import FilterPanel from './filter-panel.vue';
 import LayoutObserver from './layout-observer';
+import { mapStates } from './store/helper';
 
 const getAllColumns = (columns) => {
   const result = [];
@@ -82,7 +82,7 @@ export default {
         border="0">
         <colgroup>
           {
-            this._l(this.columns, column => <col name={ column.id } />)
+            this.columns.map(column => <col name={ column.id } key={column.id} />)
           }
           {
             this.hasGutter ? <col name="gutter" /> : ''
@@ -96,42 +96,44 @@ export default {
                 class={ this.getHeaderRowClass(rowIndex) }
               >
                 {
-                  this._l(columns, (column, cellIndex) =>
-                    <th
-                      colspan={ column.colSpan }
-                      rowspan={ column.rowSpan }
-                      on-mousemove={ ($event) => this.handleMouseMove($event, column) }
-                      on-mouseout={ this.handleMouseOut }
-                      on-mousedown={ ($event) => this.handleMouseDown($event, column) }
-                      on-click={ ($event) => this.handleHeaderClick($event, column) }
-                      on-contextmenu={ ($event) => this.handleHeaderContextMenu($event, column) }
-                      style={ this.getHeaderCellStyle(rowIndex, cellIndex, columns, column) }
-                      class={ this.getHeaderCellClass(rowIndex, cellIndex, columns, column) }
-                      key={ column.id }>
-                      <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : '', column.labelClassName] }>
-                        {
-                          column.renderHeader
-                            ? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context })
-                            : column.label
-                        }
-                        {
-                          column.sortable
-                            ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
-                              <i class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
-                              </i>
-                              <i class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
-                              </i>
-                            </span>
-                            : ''
-                        }
-                        {
-                          column.filterable
-                            ? <span class="el-table__column-filter-trigger" on-click={ ($event) => this.handleFilterClick($event, column) }><i class={ ['el-icon-arrow-down', column.filterOpened ? 'el-icon-arrow-up' : ''] }></i></span>
-                            : ''
-                        }
-                      </div>
-                    </th>
-                  )
+                  columns.map((column, cellIndex) => (<th
+                    colspan={ column.colSpan }
+                    rowspan={ column.rowSpan }
+                    on-mousemove={ ($event) => this.handleMouseMove($event, column) }
+                    on-mouseout={ this.handleMouseOut }
+                    on-mousedown={ ($event) => this.handleMouseDown($event, column) }
+                    on-click={ ($event) => this.handleHeaderClick($event, column) }
+                    on-contextmenu={ ($event) => this.handleHeaderContextMenu($event, column) }
+                    style={ this.getHeaderCellStyle(rowIndex, cellIndex, columns, column) }
+                    class={ this.getHeaderCellClass(rowIndex, cellIndex, columns, column) }
+                    key={ column.id }>
+                    <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : '', column.labelClassName] }>
+                      {
+                        column.renderHeader
+                          ? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context })
+                          : column.label
+                      }
+                      {
+                        column.sortable ? (<span
+                          class="caret-wrapper"
+                          on-click={ ($event) => this.handleSortClick($event, column) }>
+                          <i class="sort-caret ascending"
+                            on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
+                          </i>
+                          <i class="sort-caret descending"
+                            on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
+                          </i>
+                        </span>) : ''
+                      }
+                      {
+                        column.filterable ? (<span
+                          class="el-table__column-filter-trigger"
+                          on-click={ ($event) => this.handleFilterClick($event, column) }>
+                          <i class={ ['el-icon-arrow-down', column.filterOpened ? 'el-icon-arrow-up' : ''] }></i>
+                        </span>) : ''
+                      }
+                    </div>
+                  </th>))
                 }
                 {
                   this.hasGutter ? <th class="gutter"></th> : ''
@@ -162,8 +164,7 @@ export default {
   },
 
   components: {
-    ElCheckbox,
-    ElTag
+    ElCheckbox
   },
 
   computed: {
@@ -171,37 +172,19 @@ export default {
       return this.$parent;
     },
 
-    isAllSelected() {
-      return this.store.states.isAllSelected;
-    },
-
-    columnsCount() {
-      return this.store.states.columns.length;
-    },
-
-    leftFixedCount() {
-      return this.store.states.fixedColumns.length;
-    },
-
-    rightFixedCount() {
-      return this.store.states.rightFixedColumns.length;
-    },
-
-    leftFixedLeafCount() {
-      return this.store.states.fixedLeafColumnsLength;
-    },
-
-    rightFixedLeafCount() {
-      return this.store.states.rightFixedLeafColumnsLength;
-    },
-
-    columns() {
-      return this.store.states.columns;
-    },
-
     hasGutter() {
       return !this.fixed && this.tableLayout.gutterWidth;
-    }
+    },
+
+    ...mapStates({
+      columns: 'columns',
+      isAllSelected: 'isAllSelected',
+      leftFixedLeafCount: 'fixedLeafColumnsLength',
+      rightFixedLeafCount: 'rightFixedLeafColumnsLength',
+      columnsCount: states => states.columns.length,
+      leftFixedCount: states => states.fixedColumns.length,
+      rightFixedCount: states => states.rightFixedColumns.length
+    })
   },
 
   created() {
diff --git a/packages/table/src/table-layout.js b/packages/table/src/table-layout.js
index a7a14a1c6c2..5b78519da81 100644
--- a/packages/table/src/table-layout.js
+++ b/packages/table/src/table-layout.js
@@ -1,5 +1,6 @@
-import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
 import Vue from 'vue';
+import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
+import { parseHeight } from './util';
 
 class TableLayout {
   constructor(options) {
@@ -41,7 +42,7 @@ class TableLayout {
 
   updateScrollY() {
     const height = this.height;
-    if (typeof height !== 'string' && typeof height !== 'number') return;
+    if (height === null) return;
     const bodyWrapper = this.table.bodyWrapper;
     if (this.table.$el && bodyWrapper) {
       const body = bodyWrapper.querySelector('.el-table__body');
@@ -52,25 +53,33 @@ class TableLayout {
   setHeight(value, prop = 'height') {
     if (Vue.prototype.$isServer) return;
     const el = this.table.$el;
-    if (typeof value === 'string' && /^\d+$/.test(value)) {
-      value = Number(value);
-    }
+    value = parseHeight(value);
     this.height = value;
 
     if (!el && (value || value === 0)) return Vue.nextTick(() => this.setHeight(value, prop));
 
-    if (typeof value === 'number') {
-      el.style[prop] = value + 'px';
-
-      this.updateElsHeight();
-    } else if (typeof value === 'string') {
-      el.style[prop] = value;
+    if (value) {
+      el.style[prop] = `${value}px`;
       this.updateElsHeight();
     }
   }
 
   setMaxHeight(value) {
-    return this.setHeight(value, 'max-height');
+    this.setHeight(value, 'max-height');
+  }
+
+  getFlattenColumns() {
+    const flattenColumns = [];
+    const columns = this.table.columns;
+    columns.forEach((column) => {
+      if (column.isColumnGroup) {
+        flattenColumns.push.apply(flattenColumns, column.columns);
+      } else {
+        flattenColumns.push(column);
+      }
+    });
+
+    return flattenColumns;
   }
 
   updateElsHeight() {
@@ -84,11 +93,11 @@ class TableLayout {
       return Vue.nextTick(() => this.updateElsHeight());
     }
     const tableHeight = this.tableHeight = this.table.$el.clientHeight;
-    if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) {
-      const footerHeight = this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
+    const footerHeight = this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
+    if (this.height !== null) {
       this.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
     }
-    this.fixedBodyHeight = this.scrollX ? this.bodyHeight - this.gutterWidth : this.bodyHeight;
+    this.fixedBodyHeight = this.scrollX ? (this.bodyHeight - this.gutterWidth) : this.bodyHeight;
 
     const noData = !this.table.data || this.table.data.length === 0;
     this.viewportHeight = this.scrollX ? tableHeight - (noData ? 0 : this.gutterWidth) : tableHeight;
@@ -97,20 +106,6 @@ class TableLayout {
     this.notifyObservers('scrollable');
   }
 
-  getFlattenColumns() {
-    const flattenColumns = [];
-    const columns = this.table.columns;
-    columns.forEach((column) => {
-      if (column.isColumnGroup) {
-        flattenColumns.push.apply(flattenColumns, column.columns);
-      } else {
-        flattenColumns.push(column);
-      }
-    });
-
-    return flattenColumns;
-  }
-
   updateColumnsWidth() {
     if (Vue.prototype.$isServer) return;
     const fit = this.fit;
diff --git a/packages/table/src/table-store.js b/packages/table/src/table-store.js
deleted file mode 100644
index 54b7294afe6..00000000000
--- a/packages/table/src/table-store.js
+++ /dev/null
@@ -1,753 +0,0 @@
-import Vue from 'vue';
-import debounce from 'throttle-debounce/debounce';
-import merge from 'element-ui/src/utils/merge';
-import { orderBy, getColumnById, getRowIdentity, getColumnByKey } from './util';
-
-const sortData = (data, states) => {
-  const sortingColumn = states.sortingColumn;
-  if (!sortingColumn || typeof sortingColumn.sortable === 'string') {
-    return data;
-  }
-  if (Object.keys(states.treeData).length === 0) {
-    return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
-  }
-  // 存在嵌套类型的数据
-  const rowKey = states.rowKey;
-  const filteredData = [];
-  const treeDataMap = {};
-  let index = 0;
-  while (index < data.length) {
-    let cur = data[index];
-    const key = cur[rowKey];
-    let treeNode = states.treeData[key];
-    filteredData.push(cur);
-    index++;
-    if (!treeNode) {
-      continue;
-    }
-    treeDataMap[key] = [];
-    while (index < data.length) {
-      cur = data[index];
-      treeNode = states.treeData[cur[rowKey]];
-      index++;
-      if (treeNode && treeNode.level !== 0) {
-        treeDataMap[key].push(cur);
-      } else {
-        filteredData.push(cur);
-        break;
-      }
-    }
-  }
-  const sortedData = orderBy(filteredData, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
-  return sortedData.reduce((prev, current) => {
-    const treeNodes = treeDataMap[current[rowKey]] || [];
-    return prev.concat(current, treeNodes);
-  }, []);
-};
-
-const getKeysMap = function(array, rowKey) {
-  const arrayMap = {};
-  (array || []).forEach((row, index) => {
-    arrayMap[getRowIdentity(row, rowKey)] = { row, index };
-  });
-  return arrayMap;
-};
-
-const toggleRowSelection = function(states, row, selected) {
-  let changed = false;
-  const selection = states.selection;
-  const index = selection.indexOf(row);
-  if (typeof selected === 'undefined') {
-    if (index === -1) {
-      selection.push(row);
-      changed = true;
-    } else {
-      selection.splice(index, 1);
-      changed = true;
-    }
-  } else {
-    if (selected && index === -1) {
-      selection.push(row);
-      changed = true;
-    } else if (!selected && index > -1) {
-      selection.splice(index, 1);
-      changed = true;
-    }
-  }
-
-  return changed;
-};
-
-const toggleRowExpansion = function(states, row, expanded) {
-  let changed = false;
-  const expandRows = states.expandRows;
-  if (typeof expanded !== 'undefined') {
-    const index = expandRows.indexOf(row);
-    if (expanded) {
-      if (index === -1) {
-        expandRows.push(row);
-        changed = true;
-      }
-    } else {
-      if (index !== -1) {
-        expandRows.splice(index, 1);
-        changed = true;
-      }
-    }
-  } else {
-    const index = expandRows.indexOf(row);
-    if (index === -1) {
-      expandRows.push(row);
-      changed = true;
-    } else {
-      expandRows.splice(index, 1);
-      changed = true;
-    }
-  }
-
-  return changed;
-};
-
-const TableStore = function(table, initialState = {}) {
-  if (!table) {
-    throw new Error('Table is required.');
-  }
-  this.table = table;
-
-  this.states = {
-    rowKey: null,
-    _columns: [],
-    originColumns: [],
-    columns: [],
-    fixedColumns: [],
-    rightFixedColumns: [],
-    leafColumns: [],
-    fixedLeafColumns: [],
-    rightFixedLeafColumns: [],
-    leafColumnsLength: 0,
-    fixedLeafColumnsLength: 0,
-    rightFixedLeafColumnsLength: 0,
-    isComplex: false,
-    filteredData: null,
-    data: null,
-    sortingColumn: null,
-    sortProp: null,
-    sortOrder: null,
-    isAllSelected: false,
-    selection: [],
-    reserveSelection: false,
-    selectable: null,
-    currentRow: null,
-    hoverRow: null,
-    filters: {},
-    expandRows: [],
-    defaultExpandAll: false,
-    selectOnIndeterminate: false,
-    treeData: {},
-    indent: 16,
-    lazy: false,
-    lazyTreeNodeMap: {}
-  };
-
-  this._toggleAllSelection = debounce(10, function(states) {
-    const data = states.data || [];
-    if (data.length === 0) return;
-    const selection = this.states.selection;
-    // when only some rows are selected (but not all), select or deselect all of them
-    // depending on the value of selectOnIndeterminate
-    const value = states.selectOnIndeterminate
-      ? !states.isAllSelected
-      : !(states.isAllSelected || selection.length);
-    let selectionChanged = false;
-    data.forEach((item, index) => {
-      if (states.selectable) {
-        if (states.selectable.call(null, item, index) && toggleRowSelection(states, item, value)) {
-          selectionChanged = true;
-        }
-      } else {
-        if (toggleRowSelection(states, item, value)) {
-          selectionChanged = true;
-        }
-      }
-    });
-    const table = this.table;
-    if (selectionChanged) {
-      table.$emit('selection-change', selection ? selection.slice() : []);
-    }
-    table.$emit('select-all', selection);
-    states.isAllSelected = value;
-  });
-
-  for (let prop in initialState) {
-    if (initialState.hasOwnProperty(prop) && this.states.hasOwnProperty(prop)) {
-      this.states[prop] = initialState[prop];
-    }
-  }
-};
-
-TableStore.prototype.mutations = {
-  setData(states, data) {
-    const dataInstanceChanged = states._data !== data;
-    states._data = data;
-
-    Object.keys(states.filters).forEach((columnId) => {
-      const values = states.filters[columnId];
-      if (!values || values.length === 0) return;
-      const column = getColumnById(this.states, columnId);
-      if (column && column.filterMethod) {
-        data = data.filter((row) => {
-          return values.some(value => column.filterMethod.call(null, value, row, column));
-        });
-      }
-    });
-
-    states.filteredData = data;
-    states.data = sortData((data || []), states);
-
-    this.updateCurrentRow();
-
-    const rowKey = states.rowKey;
-
-    if (!states.reserveSelection) {
-      if (dataInstanceChanged) {
-        this.clearSelection();
-      } else {
-        this.cleanSelection();
-      }
-      this.updateAllSelected();
-    } else {
-      if (rowKey) {
-        const selection = states.selection;
-        const selectedMap = getKeysMap(selection, rowKey);
-
-        states.data.forEach((row) => {
-          const rowId = getRowIdentity(row, rowKey);
-          const rowInfo = selectedMap[rowId];
-          if (rowInfo) {
-            selection[rowInfo.index] = row;
-          }
-        });
-
-        this.updateAllSelected();
-      } else {
-        console.warn('WARN: rowKey is required when reserve-selection is enabled.');
-      }
-    }
-
-    const defaultExpandAll = states.defaultExpandAll;
-    if (defaultExpandAll) {
-      this.states.expandRows = (states.data || []).slice(0);
-    } else if (rowKey) {
-      // update expandRows to new rows according to rowKey
-      const ids = getKeysMap(this.states.expandRows, rowKey);
-      let expandRows = [];
-      for (const row of states.data) {
-        const rowId = getRowIdentity(row, rowKey);
-        if (ids[rowId]) {
-          expandRows.push(row);
-        }
-      }
-      this.states.expandRows = expandRows;
-    } else {
-      // clear the old rows
-      this.states.expandRows = [];
-    }
-
-    Vue.nextTick(() => this.table.updateScrollY());
-  },
-
-  changeSortCondition(states, options) {
-    states.data = sortData((states.filteredData || states._data || []), states);
-
-    if (!options || !(options.silent || options.init)) {
-      this.table.$emit('sort-change', {
-        column: this.states.sortingColumn,
-        prop: this.states.sortProp,
-        order: this.states.sortOrder
-      });
-    }
-
-    Vue.nextTick(() => this.table.updateScrollY());
-  },
-
-  sort(states, options) {
-    const { prop, order, init } = options;
-    if (prop) {
-      states.sortProp = prop;
-      states.sortOrder = order || 'ascending';
-      Vue.nextTick(() => {
-        for (let i = 0, length = states.columns.length; i < length; i++) {
-          let column = states.columns[i];
-          if (column.property === states.sortProp) {
-            column.order = states.sortOrder;
-            states.sortingColumn = column;
-            break;
-          }
-        }
-
-        if (states.sortingColumn) {
-          this.commit('changeSortCondition', {
-            init: init
-          });
-        }
-      });
-    }
-  },
-
-  filterChange(states, options) {
-    let { column, values, silent, multi } = options;
-    if (values && !Array.isArray(values)) {
-      values = [values];
-    }
-    const filters = {};
-
-    if (multi) {
-      column.forEach(col => {
-        states.filters[col.id] = values;
-        filters[col.columnKey || col.id] = values;
-      });
-    } else {
-      const prop = column.property;
-
-      if (prop) {
-        states.filters[column.id] = values;
-        filters[column.columnKey || column.id] = values;
-      }
-    }
-
-    let data = states._data;
-
-    Object.keys(states.filters).forEach((columnId) => {
-      const values = states.filters[columnId];
-      if (!values || values.length === 0) return;
-      const column = getColumnById(this.states, columnId);
-      if (column && column.filterMethod) {
-        data = data.filter((row) => {
-          return values.some(value => column.filterMethod.call(null, value, row, column));
-        });
-      }
-    });
-
-    states.filteredData = data;
-    states.data = sortData(data, states);
-
-    if (!silent) {
-      this.table.$emit('filter-change', filters);
-    }
-
-    Vue.nextTick(() => this.table.updateScrollY());
-  },
-
-  insertColumn(states, column, index, parent) {
-    let array = states._columns;
-    if (parent) {
-      array = parent.children;
-      if (!array) array = parent.children = [];
-    }
-
-    if (typeof index !== 'undefined') {
-      array.splice(index, 0, column);
-    } else {
-      array.push(column);
-    }
-
-    if (column.type === 'selection') {
-      states.selectable = column.selectable;
-      states.reserveSelection = column.reserveSelection;
-    }
-
-    if (this.table.$ready) {
-      this.updateColumns(); // hack for dynamics insert column
-      this.scheduleLayout();
-    }
-  },
-
-  removeColumn(states, column, parent) {
-    let array = states._columns;
-    if (parent) {
-      array = parent.children;
-      if (!array) array = parent.children = [];
-    }
-    if (array) {
-      array.splice(array.indexOf(column), 1);
-    }
-
-    if (this.table.$ready) {
-      this.updateColumns(); // hack for dynamics remove column
-      this.scheduleLayout();
-    }
-  },
-
-  setHoverRow(states, row) {
-    states.hoverRow = row;
-  },
-
-  setCurrentRow(states, row) {
-    const oldCurrentRow = states.currentRow;
-    states.currentRow = row;
-
-    if (oldCurrentRow !== row) {
-      this.table.$emit('current-change', row, oldCurrentRow);
-    }
-  },
-
-  rowSelectedChanged(states, row) {
-    const changed = toggleRowSelection(states, row);
-    const selection = states.selection;
-
-    if (changed) {
-      const table = this.table;
-      table.$emit('selection-change', selection ? selection.slice() : []);
-      table.$emit('select', selection, row);
-    }
-
-    this.updateAllSelected();
-  },
-
-  toggleAllSelection(state) {
-    this._toggleAllSelection(state);
-  }
-};
-
-const doFlattenColumns = (columns) => {
-  const result = [];
-  columns.forEach((column) => {
-    if (column.children) {
-      result.push.apply(result, doFlattenColumns(column.children));
-    } else {
-      result.push(column);
-    }
-  });
-  return result;
-};
-
-TableStore.prototype.updateColumns = function() {
-  const states = this.states;
-  const _columns = states._columns || [];
-  states.fixedColumns = _columns.filter((column) => column.fixed === true || column.fixed === 'left');
-  states.rightFixedColumns = _columns.filter((column) => column.fixed === 'right');
-
-  if (states.fixedColumns.length > 0 && _columns[0] && _columns[0].type === 'selection' && !_columns[0].fixed) {
-    _columns[0].fixed = true;
-    states.fixedColumns.unshift(_columns[0]);
-  }
-
-  const notFixedColumns = _columns.filter(column => !column.fixed);
-  states.originColumns = [].concat(states.fixedColumns).concat(notFixedColumns).concat(states.rightFixedColumns);
-
-  const leafColumns = doFlattenColumns(notFixedColumns);
-  const fixedLeafColumns = doFlattenColumns(states.fixedColumns);
-  const rightFixedLeafColumns = doFlattenColumns(states.rightFixedColumns);
-
-  states.leafColumnsLength = leafColumns.length;
-  states.fixedLeafColumnsLength = fixedLeafColumns.length;
-  states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
-
-  states.columns = [].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns);
-  states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;
-};
-
-TableStore.prototype.isSelected = function(row) {
-  return (this.states.selection || []).indexOf(row) > -1;
-};
-
-TableStore.prototype.clearSelection = function() {
-  const states = this.states;
-  states.isAllSelected = false;
-  const oldSelection = states.selection;
-  if (states.selection.length) {
-    states.selection = [];
-  }
-  if (oldSelection.length > 0) {
-    this.table.$emit('selection-change', states.selection ? states.selection.slice() : []);
-  }
-};
-
-TableStore.prototype.setExpandRowKeys = function(rowKeys) {
-  const expandRows = [];
-  const data = this.states.data;
-  const rowKey = this.states.rowKey;
-  if (!rowKey) throw new Error('[Table] prop row-key should not be empty.');
-  const keysMap = getKeysMap(data, rowKey);
-  rowKeys.forEach((key) => {
-    const info = keysMap[key];
-    if (info) {
-      expandRows.push(info.row);
-    }
-  });
-
-  this.states.expandRows = expandRows;
-};
-
-TableStore.prototype.toggleRowSelection = function(row, selected) {
-  const changed = toggleRowSelection(this.states, row, selected);
-  if (changed) {
-    this.table.$emit('selection-change', this.states.selection ? this.states.selection.slice() : []);
-  }
-};
-
-TableStore.prototype.toggleRowExpansion = function(row, expanded) {
-  const changed = toggleRowExpansion(this.states, row, expanded);
-  if (changed) {
-    this.table.$emit('expand-change', row, this.states.expandRows);
-    this.scheduleLayout();
-  }
-};
-
-TableStore.prototype.isRowExpanded = function(row) {
-  const { expandRows = [], rowKey } = this.states;
-  if (rowKey) {
-    const expandMap = getKeysMap(expandRows, rowKey);
-    return !!expandMap[getRowIdentity(row, rowKey)];
-  }
-  return expandRows.indexOf(row) !== -1;
-};
-
-TableStore.prototype.cleanSelection = function() {
-  const selection = this.states.selection || [];
-  const data = this.states.data;
-  const rowKey = this.states.rowKey;
-  let deleted;
-  if (rowKey) {
-    deleted = [];
-    const selectedMap = getKeysMap(selection, rowKey);
-    const dataMap = getKeysMap(data, rowKey);
-    for (let key in selectedMap) {
-      if (selectedMap.hasOwnProperty(key) && !dataMap[key]) {
-        deleted.push(selectedMap[key].row);
-      }
-    }
-  } else {
-    deleted = selection.filter((item) => {
-      return data.indexOf(item) === -1;
-    });
-  }
-
-  deleted.forEach((deletedItem) => {
-    selection.splice(selection.indexOf(deletedItem), 1);
-  });
-
-  if (deleted.length) {
-    this.table.$emit('selection-change', selection ? selection.slice() : []);
-  }
-};
-
-TableStore.prototype.clearFilter = function(columnKeys) {
-  const states = this.states;
-  const { tableHeader, fixedTableHeader, rightFixedTableHeader } = this.table.$refs;
-  let panels = {};
-
-  if (tableHeader) panels = merge(panels, tableHeader.filterPanels);
-  if (fixedTableHeader) panels = merge(panels, fixedTableHeader.filterPanels);
-  if (rightFixedTableHeader) panels = merge(panels, rightFixedTableHeader.filterPanels);
-
-  const keys = Object.keys(panels);
-  if (!keys.length) return;
-
-  if (typeof columnKeys === 'string') {
-    columnKeys = [columnKeys];
-  }
-  if (Array.isArray(columnKeys)) {
-    const columns = columnKeys.map(key => getColumnByKey(states, key));
-    keys.forEach(key => {
-      const column = columns.find(col => col.id === key);
-      if (column) {
-        panels[key].filteredValue = [];
-      }
-    });
-    this.commit('filterChange', {
-      column: columns,
-      value: [],
-      silent: true,
-      multi: true
-    });
-  } else {
-    keys.forEach(key => {
-      panels[key].filteredValue = [];
-    });
-
-    states.filters = {};
-
-    this.commit('filterChange', {
-      column: {},
-      values: [],
-      silent: true
-    });
-  }
-};
-
-TableStore.prototype.clearSort = function() {
-  const states = this.states;
-  if (!states.sortingColumn) return;
-  states.sortingColumn.order = null;
-  states.sortProp = null;
-  states.sortOrder = null;
-
-  this.commit('changeSortCondition', {
-    silent: true
-  });
-};
-
-TableStore.prototype.updateAllSelected = function() {
-  const states = this.states;
-  const { selection, rowKey, selectable, data } = states;
-  if (!data || data.length === 0) {
-    states.isAllSelected = false;
-    return;
-  }
-
-  let selectedMap;
-  if (rowKey) {
-    selectedMap = getKeysMap(states.selection, rowKey);
-  }
-
-  const isSelected = function(row) {
-    if (selectedMap) {
-      return !!selectedMap[getRowIdentity(row, rowKey)];
-    } else {
-      return selection.indexOf(row) !== -1;
-    }
-  };
-
-  let isAllSelected = true;
-  let selectedCount = 0;
-  for (let i = 0, j = data.length; i < j; i++) {
-    const item = data[i];
-    const isRowSelectable = selectable && selectable.call(null, item, i);
-    if (!isSelected(item)) {
-      if (!selectable || isRowSelectable) {
-        isAllSelected = false;
-        break;
-      }
-    } else {
-      selectedCount++;
-    }
-  }
-
-  if (selectedCount === 0) isAllSelected = false;
-
-  states.isAllSelected = isAllSelected;
-};
-
-TableStore.prototype.scheduleLayout = function(updateColumns) {
-  if (updateColumns) {
-    this.updateColumns();
-  }
-  this.table.debouncedUpdateLayout();
-};
-
-TableStore.prototype.setCurrentRowKey = function(key) {
-  const states = this.states;
-  const rowKey = states.rowKey;
-  if (!rowKey) throw new Error('[Table] row-key should not be empty.');
-  const data = states.data || [];
-  const keysMap = getKeysMap(data, rowKey);
-  const info = keysMap[key];
-  states.currentRow = info ? info.row : null;
-};
-
-TableStore.prototype.updateCurrentRow = function() {
-  const states = this.states;
-  const table = this.table;
-  const data = states.data || [];
-  const oldCurrentRow = states.currentRow;
-
-  if (data.indexOf(oldCurrentRow) === -1) {
-    if (states.rowKey && oldCurrentRow) {
-      let newCurrentRow = null;
-      for (let i = 0; i < data.length; i++) {
-        const item = data[i];
-        if (item && item[states.rowKey] === oldCurrentRow[states.rowKey]) {
-          newCurrentRow = item;
-          break;
-        }
-      }
-      if (newCurrentRow) {
-        states.currentRow = newCurrentRow;
-        return;
-      }
-    }
-    states.currentRow = null;
-
-    if (states.currentRow !== oldCurrentRow) {
-      table.$emit('current-change', null, oldCurrentRow);
-    }
-  }
-};
-
-TableStore.prototype.commit = function(name, ...args) {
-  const mutations = this.mutations;
-  if (mutations[name]) {
-    mutations[name].apply(this, [this.states].concat(args));
-  } else {
-    throw new Error(`Action not found: ${name}`);
-  }
-};
-
-TableStore.prototype.toggleTreeExpansion = function(rowKey) {
-  const { treeData } = this.states;
-  const node = treeData[rowKey];
-  if (!node) return;
-  if (typeof node.expanded !== 'boolean') {
-    throw new Error('a leaf must have expanded property');
-  }
-  node.expanded = !node.expanded;
-
-  let traverse = null;
-  if (node.expanded) {
-    traverse = (children, parent) => {
-      if (children && parent.expanded) {
-        children.forEach(key => {
-          treeData[key].display = true;
-          traverse(treeData[key].children, treeData[key]);
-        });
-      }
-    };
-    node.children.forEach(key => {
-      treeData[key].display = true;
-      traverse(treeData[key].children, treeData[key]);
-    });
-  } else {
-    const traverse = (children) => {
-      if (!children) return;
-      children.forEach(key => {
-        treeData[key].display = false;
-        traverse(treeData[key].children);
-      });
-    };
-    traverse(node.children);
-  }
-};
-
-TableStore.prototype.loadData = function(row, treeNode) {
-  const table = this.table;
-  const parentRowKey = treeNode.rowKey;
-  if (table.lazy && table.load) {
-    table.load(row, treeNode, (data) => {
-      if (!Array.isArray(data)) {
-        throw new Error('data must be an array');
-      }
-      const treeData = this.states.treeData;
-      data.forEach(item => {
-        const rowKey = table.getRowKey(item);
-        const parent = treeData[parentRowKey];
-        parent.loaded = true;
-        parent.children.push(rowKey);
-        const child = {
-          display: true,
-          level: parent.level + 1
-        };
-        if (item.hasChildren) {
-          child.expanded = false;
-          child.hasChildren = true;
-          child.children = [];
-        }
-        Vue.set(treeData, rowKey, child);
-        Vue.set(this.states.lazyTreeNodeMap, rowKey, item);
-      });
-      this.toggleTreeExpansion(parentRowKey);
-    });
-  }
-};
-
-export default TableStore;
diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
index 1908112243a..a2251e4fca3 100644
--- a/packages/table/src/table.vue
+++ b/packages/table/src/table.vue
@@ -214,36 +214,17 @@
 
 <script type="text/babel">
   import ElCheckbox from 'element-ui/packages/checkbox';
-  import debounce from 'throttle-debounce/debounce';
+  import { debounce, throttle } from 'throttle-debounce';
   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
   import Mousewheel from 'element-ui/src/directives/mousewheel';
   import Locale from 'element-ui/src/mixins/locale';
   import Migrating from 'element-ui/src/mixins/migrating';
-  import TableStore from './table-store';
+  import { createStore, mapStates } from './store/helper';
   import TableLayout from './table-layout';
   import TableBody from './table-body';
   import TableHeader from './table-header';
   import TableFooter from './table-footer';
-  import { getRowIdentity } from './util';
-
-  const flattenData = function(data) {
-    if (!data) return data;
-    let newData = [];
-    const flatten = arr => {
-      arr.forEach((item) => {
-        newData.push(item);
-        if (Array.isArray(item.children)) {
-          flatten(item.children);
-        }
-      });
-    };
-    flatten(data);
-    if (data.length === newData.length) {
-      return data;
-    } else {
-      return newData;
-    }
-  };
+  import { parseHeight } from './util';
 
   let tableIdSeed = 1;
 
@@ -338,6 +319,16 @@
         default: 16
       },
 
+      treeProps: {
+        type: Object,
+        default() {
+          return {
+            hasChildren: 'hasChildren',
+            children: 'children'
+          };
+        }
+      },
+
       lazy: Boolean,
 
       load: Function
@@ -369,7 +360,7 @@
       },
 
       toggleRowExpansion(row, expanded) {
-        this.store.toggleRowExpansion(row, expanded);
+        this.store.toggleRowExpansionAdapter(row, expanded);
       },
 
       clearSelection() {
@@ -413,37 +404,42 @@
       handleHeaderFooterMousewheel(event, data) {
         const { pixelX, pixelY } = data;
         if (Math.abs(pixelX) >= Math.abs(pixelY)) {
-          event.preventDefault();
           this.bodyWrapper.scrollLeft += data.pixelX / 5;
         }
       },
 
-      bindEvents() {
-        const { headerWrapper, footerWrapper } = this.$refs;
-        const refs = this.$refs;
-        let self = this;
-
-        this.bodyWrapper.addEventListener('scroll', function() {
-          if (headerWrapper) headerWrapper.scrollLeft = this.scrollLeft;
-          if (footerWrapper) footerWrapper.scrollLeft = this.scrollLeft;
-          if (refs.fixedBodyWrapper) refs.fixedBodyWrapper.scrollTop = this.scrollTop;
-          if (refs.rightFixedBodyWrapper) refs.rightFixedBodyWrapper.scrollTop = this.scrollTop;
-          const maxScrollLeftPosition = this.scrollWidth - this.offsetWidth - 1;
-          const scrollLeft = this.scrollLeft;
-          if (scrollLeft >= maxScrollLeftPosition) {
-            self.scrollPosition = 'right';
-          } else if (scrollLeft === 0) {
-            self.scrollPosition = 'left';
-          } else {
-            self.scrollPosition = 'middle';
-          }
-        });
+      // TODO 性能优化
+      syncPostion: throttle(20, function() {
+        const { scrollLeft, scrollTop, offsetWidth, scrollWidth } = this.bodyWrapper;
+        const { headerWrapper, footerWrapper, fixedBodyWrapper, rightFixedBodyWrapper } = this.$refs;
+        if (headerWrapper) headerWrapper.scrollLeft = scrollLeft;
+        if (footerWrapper) footerWrapper.scrollLeft = scrollLeft;
+        if (fixedBodyWrapper) fixedBodyWrapper.scrollTop = scrollTop;
+        if (rightFixedBodyWrapper) rightFixedBodyWrapper.scrollTop = scrollTop;
+        const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
+        if (scrollLeft >= maxScrollLeftPosition) {
+          this.scrollPosition = 'right';
+        } else if (scrollLeft === 0) {
+          this.scrollPosition = 'left';
+        } else {
+          this.scrollPosition = 'middle';
+        }
+      }),
 
+      bindEvents() {
+        this.bodyWrapper.addEventListener('scroll', this.syncPostion, { passive: true });
         if (this.fit) {
           addResizeListener(this.$el, this.resizeListener);
         }
       },
 
+      unbindEvents() {
+        this.bodyWrapper.removeEventListener('scroll', this.syncPostion, { passive: true });
+        if (this.fit) {
+          removeResizeListener(this.$el, this.resizeListener);
+        }
+      },
+
       resizeListener() {
         if (!this.$ready) return;
         let shouldUpdateLayout = false;
@@ -480,61 +476,8 @@
 
       toggleAllSelection() {
         this.store.commit('toggleAllSelection');
-      },
-
-      getRowKey(row) {
-        const rowKey = getRowIdentity(row, this.store.states.rowKey);
-        if (!rowKey) {
-          throw new Error('if there\'s nested data, rowKey is required.');
-        }
-        return rowKey;
-      },
-
-      getTableTreeData(data) {
-        const treeData = {};
-        const traverse = (children, parentData, level) => {
-          children.forEach(item => {
-            const rowKey = this.getRowKey(item);
-            treeData[rowKey] = {
-              display: false,
-              level
-            };
-            parentData.children.push(rowKey);
-            if (Array.isArray(item.children) && item.children.length) {
-              treeData[rowKey].children = [];
-              treeData[rowKey].expanded = false;
-              traverse(item.children, treeData[rowKey], level + 1);
-            }
-          });
-        };
-        if (data) {
-          data.forEach(item => {
-            const containChildren = Array.isArray(item.children) && item.children.length;
-            if (!(containChildren || item.hasChildren)) return;
-            const rowKey = this.getRowKey(item);
-            const treeNode = {
-              level: 0,
-              expanded: false,
-              display: true,
-              children: []
-            };
-            if (containChildren) {
-              treeData[rowKey] = treeNode;
-              traverse(item.children, treeData[rowKey], 1);
-            } else if (item.hasChildren && this.lazy) {
-              treeNode.hasChildren = true;
-              treeNode.loaded = false;
-              treeData[rowKey] = treeNode;
-            }
-          });
-        }
-        return treeData;
       }
-    },
 
-    created() {
-      this.tableId = 'el-table_' + tableIdSeed++;
-      this.debouncedUpdateLayout = debounce(50, () => this.doLayout());
     },
 
     computed: {
@@ -553,40 +496,24 @@
           this.rightFixedColumns.length > 0;
       },
 
-      selection() {
-        return this.store.states.selection;
-      },
-
-      columns() {
-        return this.store.states.columns;
-      },
-
-      tableData() {
-        return this.store.states.data;
-      },
-
-      fixedColumns() {
-        return this.store.states.fixedColumns;
-      },
-
-      rightFixedColumns() {
-        return this.store.states.rightFixedColumns;
-      },
-
       bodyWidth() {
         const { bodyWidth, scrollY, gutterWidth } = this.layout;
         return bodyWidth ? bodyWidth - (scrollY ? gutterWidth : 0) + 'px' : '';
       },
 
       bodyHeight() {
+        const { headerHeight = 0, bodyHeight, footerHeight = 0} = this.layout;
         if (this.height) {
           return {
-            height: this.layout.bodyHeight ? this.layout.bodyHeight + 'px' : ''
+            height: bodyHeight ? bodyHeight + 'px' : ''
           };
         } else if (this.maxHeight) {
-          return {
-            'max-height': this.layout.bodyHeight ? this.layout.bodyHeight + 'px' : ''
-          };
+          const maxHeight = parseHeight(this.maxHeight);
+          if (maxHeight) {
+            return {
+              'max-height': (maxHeight - footerHeight - (this.showHeader ? headerHeight : 0)) + 'px'
+            };
+          }
         }
         return {};
       },
@@ -597,19 +524,18 @@
             height: this.layout.fixedBodyHeight ? this.layout.fixedBodyHeight + 'px' : ''
           };
         } else if (this.maxHeight) {
-          let maxHeight = this.layout.scrollX ? this.maxHeight - this.layout.gutterWidth : this.maxHeight;
-
-          if (this.showHeader) {
-            maxHeight -= this.layout.headerHeight;
+          let maxHeight = parseHeight(this.maxHeight);
+          if (maxHeight) {
+            maxHeight = this.layout.scrollX ? maxHeight - this.layout.gutterWidth : maxHeight;
+            if (this.showHeader) {
+              maxHeight -= this.layout.headerHeight;
+            }
+            maxHeight -= this.layout.footerHeight;
+            return {
+              'max-height': maxHeight + 'px'
+            };
           }
-
-          maxHeight -= this.layout.footerHeight;
-
-          return {
-            'max-height': maxHeight + 'px'
-          };
         }
-
         return {};
       },
 
@@ -633,7 +559,15 @@
             height: this.layout.viewportHeight ? this.layout.viewportHeight + 'px' : ''
           };
         }
-      }
+      },
+
+      ...mapStates({
+        selection: 'selection',
+        columns: 'columns',
+        tableData: 'data',
+        fixedColumns: 'fixedColumns',
+        rightFixedColumns: 'rightFixedColumns'
+      })
     },
 
     watch: {
@@ -658,8 +592,6 @@
       data: {
         immediate: true,
         handler(value) {
-          this.store.states.treeData = this.getTableTreeData(value);
-          value = flattenData(value);
           this.store.commit('setData', value);
           if (this.$ready) {
             this.$nextTick(() => {
@@ -673,14 +605,15 @@
         immediate: true,
         handler(newVal) {
           if (newVal) {
-            this.store.setExpandRowKeys(newVal);
+            this.store.setExpandRowKeysAdapter(newVal);
           }
         }
       }
     },
 
-    destroyed() {
-      if (this.resizeListener) removeResizeListener(this.$el, this.resizeListener);
+    created() {
+      this.tableId = 'el-table_' + tableIdSeed++;
+      this.debouncedUpdateLayout = debounce(50, () => this.doLayout());
     },
 
     mounted() {
@@ -707,23 +640,30 @@
       this.$ready = true;
     },
 
+    destroyed() {
+      this.unbindEvents();
+    },
+
     data() {
-      const store = new TableStore(this, {
+      const { hasChildren = 'hasChildren', children = 'children' } = this.treeProps;
+      this.store = createStore(this, {
         rowKey: this.rowKey,
         defaultExpandAll: this.defaultExpandAll,
         selectOnIndeterminate: this.selectOnIndeterminate,
+        // TreeTable 的相关配置
         indent: this.indent,
-        lazy: this.lazy
+        lazy: this.lazy,
+        lazyColumnIdentifier: hasChildren,
+        childrenColumnName: children
       });
       const layout = new TableLayout({
-        store,
+        store: this.store,
         table: this,
         fit: this.fit,
         showHeader: this.showHeader
       });
       return {
         layout,
-        store,
         isHidden: false,
         renderExpanded: null,
         resizeProxyVisible: false,
diff --git a/packages/table/src/util.js b/packages/table/src/util.js
index 2125e6c5321..4d09de54b5b 100644
--- a/packages/table/src/util.js
+++ b/packages/table/src/util.js
@@ -120,3 +120,135 @@ export const getRowIdentity = (row, rowKey) => {
     return rowKey.call(null, row);
   }
 };
+
+export const getKeysMap = function(array, rowKey) {
+  const arrayMap = {};
+  (array || []).forEach((row, index) => {
+    arrayMap[getRowIdentity(row, rowKey)] = { row, index };
+  });
+  return arrayMap;
+};
+
+function hasOwn(obj, key) {
+  return Object.prototype.hasOwnProperty.call(obj, key);
+}
+
+export function mergeOptions(defaults, config) {
+  const options = {};
+  let key;
+  for (key in defaults) {
+    options[key] = defaults[key];
+  }
+  for (key in config) {
+    if (hasOwn(config, key)) {
+      const value = config[key];
+      if (typeof value !== 'undefined') {
+        options[key] = value;
+      }
+    }
+  }
+  return options;
+}
+
+export function parseWidth(width) {
+  if (width !== undefined) {
+    width = parseInt(width, 10);
+    if (isNaN(width)) {
+      width = null;
+    }
+  }
+  return width;
+}
+
+export function parseMinWidth(minWidth) {
+  if (typeof minWidth !== 'undefined') {
+    minWidth = parseWidth(minWidth);
+    if (isNaN(minWidth)) {
+      minWidth = 80;
+    }
+  }
+  return minWidth;
+};
+
+export function parseHeight(height) {
+  if (typeof height === 'number') {
+    return height;
+  }
+  if (typeof height === 'string') {
+    if (/^\d+(?:px)?/.test(height)) {
+      return parseInt(height, 10);
+    }
+    console.warn('[Element Warn][ElTable]invalid height and it will be ignored.');
+  }
+  return null;
+}
+
+// https://github.com/reduxjs/redux/blob/master/src/compose.js
+export function compose(...funcs) {
+  if (funcs.length === 0) {
+    return arg => arg;
+  }
+  if (funcs.length === 1) {
+    return funcs[0];
+  }
+  return funcs.reduce((a, b) => (...args) => a(b(...args)));
+}
+
+export function toggleRowStatus(statusArr, row, newVal) {
+  let changed = false;
+  const index = statusArr.indexOf(row);
+  const included = index !== -1;
+
+  const addRow = () => {
+    statusArr.push(row);
+    changed = true;
+  };
+  const removeRow = () => {
+    statusArr.splice(index, 1);
+    changed = true;
+  };
+
+  if (typeof newVal === 'boolean') {
+    if (newVal && !included) {
+      addRow();
+    } else if (!newVal && included) {
+      removeRow();
+    }
+  } else {
+    if (included) {
+      removeRow();
+    } else {
+      addRow();
+    }
+  }
+  return changed;
+}
+
+export function walkTreeNode(root, cb, childrenKey = 'children', lazyKey = 'hasChildren') {
+  const isNil = (array) => !(Array.isArray(array) && array.length);
+
+  function _walker(parent, children, level) {
+    cb(parent, children, level);
+    children.forEach(item => {
+      if (item[lazyKey]) {
+        cb(item, null, level + 1);
+        return;
+      }
+      const children = item[childrenKey];
+      if (!isNil(children)) {
+        _walker(item, children, level + 1);
+      }
+    });
+  }
+
+  root.forEach(item => {
+    if (item[lazyKey]) {
+      cb(item, null, 0);
+      return;
+    }
+    const children = item[childrenKey];
+    if (!isNil(children)) {
+      _walker(item, children, 0);
+    }
+  });
+}
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
index 988e58d4b29..007f4bfdaad 100644
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-theme-chalk",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index b4f7bcc0484..2d399117105 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -561,9 +561,11 @@
   [class*=el-table__row--level] {
     .el-table__expand-icon {
       display: inline-block;
-      width: 14px;
-      vertical-align: middle;
-      margin-right: 5px;
+      width: 20px;
+      line-height: 20px;
+      height: 20px;
+      text-align: center;
+      margin-right: 3px;
     }
   }
 }
diff --git a/src/index.js b/src/index.js
index b9596cde78d..ab062e4106d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -192,7 +192,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.9.0',
+  version: '2.9.1',
   locale: locale.use,
   i18n: locale.i18n,
   install,
diff --git a/src/locale/lang/pt-br.js b/src/locale/lang/pt-br.js
index bb756347fa9..7939dfb0cc1 100644
--- a/src/locale/lang/pt-br.js
+++ b/src/locale/lang/pt-br.js
@@ -107,10 +107,10 @@ export default {
       hasCheckedFormat: '{checked}/{total} selecionados'
     },
     image: {
-      error: 'FAILED' // to be translated
+      error: 'Erro ao carregar imagem'
     },
     pageHeader: {
-      title: 'Back' // to be translated
+      title: 'Voltar'
     }
   }
 };
diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js
index 42256fa90ce..abfe334b4f2 100644
--- a/test/unit/specs/table.spec.js
+++ b/test/unit/specs/table.spec.js
@@ -1,4 +1,4 @@
-import { createVue, triggerEvent, destroyVM, waitImmediate } from '../util';
+import { createVue, triggerEvent, destroyVM, waitImmediate, wait } from '../util';
 
 const DELAY = 10;
 const testDataArr = [];
@@ -91,9 +91,9 @@ describe('Table', () => {
     });
 
     it('height as string', done => {
-      const vm = createTable('height="100pt"');
+      const vm = createTable('height="100px"');
       setTimeout(_ => {
-        expect(vm.$el.style.height).to.equal('100pt');
+        expect(vm.$el.style.height).to.equal('100px');
         destroyVM(vm);
         done();
       }, DELAY);
@@ -1760,7 +1760,7 @@ describe('Table', () => {
     });
   });
 
-  it('hover', done => {
+  it('hover', async() => {
     const vm = createVue({
       template: `
         <el-table :data="testData">
@@ -1776,19 +1776,17 @@ describe('Table', () => {
         };
       }
     }, true);
-    setTimeout(_ => {
-      const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr');
-      triggerEvent(tr, 'mouseenter', true, false);
-      setTimeout(_ => {
-        expect(tr.classList.contains('hover-row')).to.true;
-        triggerEvent(tr, 'mouseleave', true, false);
-        setTimeout(_ => {
-          expect(tr.classList.contains('hover-row')).to.false;
-          destroyVM(vm);
-          done();
-        }, DELAY);
-      }, DELAY);
-    }, DELAY);
+    await waitImmediate();
+    const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr');
+    triggerEvent(tr, 'mouseenter', true, false);
+
+    await wait(50);
+    expect(tr.classList.contains('hover-row')).to.true;
+    triggerEvent(tr, 'mouseleave', true, false);
+
+    await wait(50);
+    expect(tr.classList.contains('hover-row')).to.false;
+    destroyVM(vm);
   });
 
   it('highlight-current-row', done => {
@@ -1910,96 +1908,204 @@ describe('Table', () => {
     }, DELAY);
   });
 
-  it('render tree structual data', (done) => {
-    const vm = createVue({
-      template: `
-        <el-table :data="testData" row-key="release">
-          <el-table-column prop="name" label="片名" />
-          <el-table-column prop="release" label="发行日期" />
-          <el-table-column prop="director" label="导演" />
-          <el-table-column prop="runtime" label="时长（分）" />
-        </el-table>
-      `,
-      data() {
-        const testData = getTestData();
-        testData[1].children = [
-          {
-            name: 'A Bug\'s Life copy 1', release: '1998-11-25-1', director: 'John Lasseter', runtime: 95
-          },
-          {
-            name: 'A Bug\'s Life copy 2', release: '1998-11-25-2', director: 'John Lasseter', runtime: 95
-          }
-        ];
-        return {
-          testData: testData
-        };
-      }
-    }, true);
-    setTimeout(() => {
+  describe('tree', () => {
+    let vm;
+    afterEach(() => destroyVM(vm));
+    it('render tree structual data', async() => {
+      vm = createVue({
+        template: `
+          <el-table :data="testData" row-key="release">
+            <el-table-column prop="name" label="片名" />
+            <el-table-column prop="release" label="发行日期" />
+            <el-table-column prop="director" label="导演" />
+            <el-table-column prop="runtime" label="时长（分）" />
+          </el-table>
+        `,
+        data() {
+          const testData = getTestData();
+          testData[1].children = [
+            {
+              name: 'A Bug\'s Life copy 1', release: '1998-11-25-1', director: 'John Lasseter', runtime: 95
+            },
+            {
+              name: 'A Bug\'s Life copy 2', release: '1998-11-25-2', director: 'John Lasseter', runtime: 95
+            }
+          ];
+          return {
+            testData: testData
+          };
+        }
+      }, true);
+      await waitImmediate();
+
       const rows = vm.$el.querySelectorAll('.el-table__row');
       expect(rows.length).to.equal(7);
-
       const childRows = vm.$el.querySelectorAll('.el-table__row--level-1');
       expect(childRows.length).to.equal(2);
       childRows.forEach(item => {
         expect(item.style.display).to.equal('none');
       });
-
       vm.$el.querySelector('.el-table__expand-icon').click();
 
-      setTimeout(() => {
-        childRows.forEach(item => {
-          expect(item.style.display).to.equal('');
-        });
-        done();
-      }, DELAY);
-    }, DELAY);
-  });
+      await waitImmediate();
+      childRows.forEach(item => {
+        expect(item.style.display).to.equal('');
+      });
+    });
 
-  it('load substree row data', async() => {
-    const vm = createVue({
-      template: `
-        <el-table :data="testData" row-key="release" lazy :load="load">
-          <el-table-column prop="name" label="片名" />
-          <el-table-column prop="release" label="发行日期" />
-          <el-table-column prop="director" label="导演" />
-          <el-table-column prop="runtime" label="时长（分）" />
-        </el-table>
-      `,
-      data() {
-        const testData = getTestData();
-        testData[testData.length - 1].children = [
-          {
-            name: 'A Bug\'s Life copy 1', release: '2008-1-25-1', director: 'John Lasseter', runtime: 95
-          }
-        ];
-        testData[1].hasChildren = true;
-        return {
-          testData: testData
-        };
-      },
-      methods: {
-        load(row, treeNode, resolve) {
-          resolve([
+    it('load substree row data', async() => {
+      vm = createVue({
+        template: `
+          <el-table :data="testData" row-key="release" lazy :load="load">
+            <el-table-column prop="name" label="片名" />
+            <el-table-column prop="release" label="发行日期" />
+            <el-table-column prop="director" label="导演" />
+            <el-table-column prop="runtime" label="时长（分）" />
+          </el-table>
+        `,
+        data() {
+          const testData = getTestData();
+          testData[testData.length - 1].children = [
             {
-              name: 'A Bug\'s Life copy 1', release: '1998-11-25-1', director: 'John Lasseter', runtime: 95
-            },
+              name: 'A Bug\'s Life copy 1', release: '2008-1-25-1', director: 'John Lasseter', runtime: 95
+            }
+          ];
+          testData[1].hasChildren = true;
+          return {
+            testData: testData
+          };
+        },
+        methods: {
+          load(row, treeNode, resolve) {
+            resolve([
+              {
+                name: 'A Bug\'s Life copy 1', release: '1998-11-25-1', director: 'John Lasseter', runtime: 95
+              },
+              {
+                name: 'A Bug\'s Life copy 2', release: '1998-11-25-2', director: 'John Lasseter', runtime: 95
+              }
+            ]);
+          }
+        }
+      }, true);
+      await waitImmediate();
+
+      const expandIcon = vm.$el.querySelector('.el-table__expand-icon');
+      expandIcon.click();
+
+      await waitImmediate();
+
+      expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.true;
+      expect(vm.$el.querySelectorAll('.el-table__row').length).to.equal(8);
+    });
+
+    it('tree-props & default-expand-all & expand-change', async() => {
+      const spy = sinon.spy();
+      vm = createVue({
+        template: `
+          <el-table
+            :data="testData" lazy default-expand-all row-key="release" :tree-props="{children: 'childrenTest', hasChildren: 'hasChildrenTest'}"
+            :load="load" @expand-change="change">
+            <el-table-column prop="name" label="片名" />
+            <el-table-column prop="release" label="发行日期" />
+            <el-table-column prop="director" label="导演" />
+            <el-table-column prop="runtime" label="时长（分）" />
+          </el-table>
+        `,
+        data() {
+          const testData = getTestData();
+          testData[testData.length - 1].childrenTest = [
             {
-              name: 'A Bug\'s Life copy 2', release: '1998-11-25-2', director: 'John Lasseter', runtime: 95
+              name: 'A Bug\'s Life copy 1', release: '2008-1-25-1', director: 'John Lasseter', runtime: 95
             }
-          ]);
+          ];
+          testData[1].hasChildrenTest = true;
+          return {
+            testData: testData
+          };
+        },
+        methods: {
+          load(row, treeNode, resolve) {
+            resolve([
+              {
+                name: 'A Bug\'s Life copy 1', release: '1998-11-25-1', director: 'John Lasseter', runtime: 95
+              },
+              {
+                name: 'A Bug\'s Life copy 2', release: '1998-11-25-2', director: 'John Lasseter', runtime: 95
+              }
+            ]);
+          },
+          change: spy
         }
-      }
-    }, true);
+      }, true);
+      await waitImmediate();
+      const childRows = vm.$el.querySelectorAll('.el-table__row--level-1');
+      childRows.forEach(item => {
+        expect(item.style.display).to.equal('');
+      });
+      const expandIcon = vm.$el.querySelector('.el-table__expand-icon');
+      expandIcon.click();
 
-    await waitImmediate();
+      await waitImmediate();
 
-    const expandIcon = vm.$el.querySelector('.el-table__expand-icon');
-    expandIcon.click();
+      expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.true;
+      expect(vm.$el.querySelectorAll('.el-table__row').length).to.equal(8);
+      expect(spy.args[0][0]).to.be.an('object');
+      expect(spy.args[0][1]).to.be.true;
+    });
 
-    await waitImmediate();
+    it('expand-row-keys & toggleRowExpansion', async() => {
+      vm = createVue({
+        template: `
+          <el-table :data="testData" row-key="release" lazy :load="load" :expand-row-keys="['2003-5-30']" ref="table">
+            <el-table-column prop="name" label="片名" />
+            <el-table-column prop="release" label="发行日期" />
+            <el-table-column prop="director" label="导演" />
+            <el-table-column prop="runtime" label="时长（分）" />
+          </el-table>
+        `,
+        data() {
+          const testData = getTestData();
+          testData[testData.length - 1].children = [
+            {
+              name: 'A Bug\'s Life copy 1', release: '2003-5-30-1', director: 'John Lasseter', runtime: 95,
+              hasChildren: true
+            }
+          ];
+          return {
+            testData: testData
+          };
+        },
+        methods: {
+          load(row, treeNode, resolve) {
+            resolve([
+              {
+                name: 'A Bug\'s Life copy 1', release: '2003-5-30-2', director: 'John Lasseter', runtime: 95
+              }
+            ]);
+          },
+          closeExpandRow() {
+            const testData = this.testData;
+            const row = testData[testData.length - 1].children[0];
+            this.$refs.table.toggleRowExpansion(row);
+          }
+        }
+      }, true);
+      await waitImmediate();
+      const childRows = vm.$el.querySelectorAll('.el-table__row--level-1');
+      childRows.forEach(item => {
+        expect(item.style.display).to.equal('');
+      });
+      const expandIcon = childRows[0].querySelector('.el-table__expand-icon');
+      expandIcon.click();
+
+      await waitImmediate();
 
-    expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.true;
-    expect(vm.$el.querySelectorAll('.el-table__row').length).to.equal(8);
+      expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.true;
+      vm.closeExpandRow();
+
+      await waitImmediate();
+      expect(expandIcon.classList.contains('el-table__expand-icon--expanded')).to.be.false;
+    });
   });
 });
diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts
index e35fe0cd6d3..072ae910266 100644
--- a/types/element-ui.d.ts
+++ b/types/element-ui.d.ts
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import Vue, { PluginObject } from 'vue'
 import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
 
 import { ElAlert } from './alert'
diff --git a/yarn.lock b/yarn.lock
index de54022e437..3999270028c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4080,9 +4080,9 @@ fsevents@^1.0.0, fsevents@^1.2.2, fsevents@^1.2.7:
     node-pre-gyp "^0.10.0"
 
 fstream@^1.0.0, fstream@^1.0.2:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
-  integrity sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
+  integrity sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==
   dependencies:
     graceful-fs "^4.1.2"
     inherits "~2.0.0"
@@ -4210,7 +4210,7 @@ glob-watcher@^5.0.0:
     just-debounce "^1.0.0"
     object.defaults "^1.1.0"
 
-glob@7.1.3, glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@~7.1.1:
+glob@7.1.3, glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@~7.1.1:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
   integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
@@ -4233,6 +4233,18 @@ glob@^5.0.15:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.1.3:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
+  integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-modules-path@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/global-modules-path/-/global-modules-path-2.3.1.tgz#e541f4c800a1a8514a990477b267ac67525b9931"