diff --git a/.gitignore b/.gitignore
index df314fd8f..44c37ee12 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ lib
 examples/element-ui
 examples/pages/en-US
 examples/pages/zh-CN
+examples/pages/es
 fe.element/element-ui
 .npmrc
 coverage
diff --git a/README.md b/README.md
index ce698fbed..e83727b46 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,18 @@
 
 > A Vue.js 2.0 UI Toolkit for Web.
 
+<p align="center">
+  <b>Special thanks to the generous sponsorship by:</b>
+</p>
+<p align="center">
+  <a href="https://tipe.io/?ref=element" target="_blank">Tipo.io</a>
+</p>
+<p align="center">
+  <a href="https://tipe.io/?ref=element" target="_blank">
+    <img style="vertical-align: middle" width="150px" src="https://user-images.githubusercontent.com/10095631/34094742-79218b1c-e409-11e7-8efc-65e14c0e15c3.png">
+  </a>
+</p>
+
 ## Links
 - Homepage and documentation
   - International users: http://element.eleme.io/
diff --git a/examples/assets/images/tipe.svg b/examples/assets/images/tipe.svg
new file mode 100644
index 000000000..e4026a1c5
--- /dev/null
+++ b/examples/assets/images/tipe.svg
@@ -0,0 +1,175 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 148.32 226.69">
+  <defs>
+    <style>
+      .cls-1 {
+        isolation: isolate;
+      }
+
+      .cls-2 {
+        fill: url(#radial-gradient);
+      }
+
+      .cls-3 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-4 {
+        fill: url(#linear-gradient-2);
+      }
+
+      .cls-5 {
+        fill: url(#linear-gradient-3);
+      }
+
+      .cls-6 {
+        fill: url(#linear-gradient-4);
+      }
+
+      .cls-7 {
+        fill: url(#linear-gradient-5);
+      }
+
+      .cls-8 {
+        fill: url(#linear-gradient-6);
+      }
+
+      .cls-9 {
+        opacity: 0.7;
+      }
+
+      .cls-11, .cls-9 {
+        mix-blend-mode: multiply;
+      }
+
+      .cls-10 {
+        fill: url(#linear-gradient-7);
+      }
+
+      .cls-12 {
+        fill: url(#linear-gradient-8);
+      }
+
+      .cls-13 {
+        fill: url(#linear-gradient-9);
+      }
+
+      .cls-14 {
+        fill: #3c2e36;
+      }
+
+      .cls-15 {
+        fill: url(#linear-gradient-10);
+      }
+
+      .cls-16 {
+        fill: url(#radial-gradient-2);
+      }
+    </style>
+    <radialGradient id="radial-gradient" cx="74.93" cy="117.87" r="86.39" gradientTransform="translate(0 22.72) scale(1 1.07)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.32" stop-color="#e4dce1"/>
+      <stop offset="0.48" stop-color="#e1dadf"/>
+      <stop offset="0.59" stop-color="#d9d3da"/>
+      <stop offset="0.68" stop-color="#cac7d2"/>
+      <stop offset="0.76" stop-color="#b5b6c6"/>
+      <stop offset="0.79" stop-color="#aaadc0"/>
+      <stop offset="1" stop-color="#6f6f85"/>
+    </radialGradient>
+    <linearGradient id="linear-gradient" x1="38.85" y1="122.53" x2="108.18" y2="108.38" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e4dce1"/>
+      <stop offset="0.19" stop-color="#d7d0d7"/>
+      <stop offset="0.53" stop-color="#b5b2be"/>
+      <stop offset="0.97" stop-color="#808296"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="32.25" y1="64.7" x2="148.44" y2="64.7" gradientUnits="userSpaceOnUse">
+      <stop offset="0.32" stop-color="#e4dce1"/>
+      <stop offset="0.49" stop-color="#e1dadf"/>
+      <stop offset="0.6" stop-color="#d9d3da"/>
+      <stop offset="0.69" stop-color="#cac7d2"/>
+      <stop offset="0.78" stop-color="#b5b6c6"/>
+      <stop offset="0.81" stop-color="#aaadc0"/>
+      <stop offset="1" stop-color="#6f6f85"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="139.11" y1="68.34" x2="139.11" y2="1.17" gradientUnits="userSpaceOnUse">
+      <stop offset="0.12" stop-color="#888aa0"/>
+      <stop offset="0.54" stop-color="#716f8a"/>
+      <stop offset="0.89" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-4" x1="111.94" y1="16.05" x2="135.36" y2="16.05" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3c314b"/>
+      <stop offset="0.54" stop-color="#534a67"/>
+      <stop offset="0.89" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-5" x1="6752.04" y1="68.34" x2="6752.04" y2="-3.45" gradientTransform="matrix(-1, 0, 0, 1, 6787.68, 0)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.19" stop-color="#e4dce1"/>
+      <stop offset="0.42" stop-color="#c2bac6"/>
+      <stop offset="0.92" stop-color="#6b6582"/>
+      <stop offset="0.97" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-6" x1="39.39" y1="16.05" x2="62.82" y2="16.05" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3c314b"/>
+      <stop offset="0.02" stop-color="#3d324c"/>
+      <stop offset="0.35" stop-color="#524a66"/>
+      <stop offset="0.65" stop-color="#5f5876"/>
+      <stop offset="0.89" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-7" x1="79.66" y1="229.05" x2="79.66" y2="194.82" gradientUnits="userSpaceOnUse">
+      <stop offset="0.03" stop-color="#808296"/>
+      <stop offset="0.31" stop-color="#b7b8c3" stop-opacity="0.78"/>
+      <stop offset="0.79" stop-color="#fff" stop-opacity="0.5"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-8" x1="87.38" y1="117.84" x2="87.38" y2="41.77" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e3dddf" stop-opacity="0"/>
+      <stop offset="0.04" stop-color="#cbc5cd" stop-opacity="0.12"/>
+      <stop offset="0.15" stop-color="#9d97a9" stop-opacity="0.37"/>
+      <stop offset="0.25" stop-color="#7b758f" stop-opacity="0.54"/>
+      <stop offset="0.35" stop-color="#67617f" stop-opacity="0.65"/>
+      <stop offset="0.45" stop-color="#605a7a" stop-opacity="0.68"/>
+      <stop offset="0.54" stop-color="#575070" stop-opacity="0.75"/>
+      <stop offset="1" stop-color="#382e4a"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-9" x1="11357.22" y1="78.8" x2="11361.46" y2="58.49" gradientTransform="matrix(-1, 0, 0, 1, 11419.34, 0)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.07" stop-color="#28ffff"/>
+      <stop offset="0.41" stop-color="#51d2ff"/>
+      <stop offset="0.8" stop-color="#7ba3ff"/>
+      <stop offset="1" stop-color="#8b91ff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-10" x1="113" y1="78.8" x2="117.24" y2="58.49" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient-9"/>
+    <radialGradient id="radial-gradient-2" cx="36.09" cy="124.71" r="36.13" gradientUnits="userSpaceOnUse">
+      <stop offset="0.11" stop-color="#635d7c"/>
+      <stop offset="0.35" stop-color="#5f5876"/>
+      <stop offset="0.65" stop-color="#524a66"/>
+      <stop offset="0.98" stop-color="#3d324c"/>
+      <stop offset="1" stop-color="#3c314b"/>
+    </radialGradient>
+  </defs>
+  <title>Asset 3</title>
+  <g class="cls-1">
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <g>
+          <path class="cls-2" d="M138.13,128.27c-4.7-9.78-11.29-21.28-9.75-33.55a15.83,15.83,0,0,1,3.26-8.26A65.12,65.12,0,0,1,114.75,99a64.1,64.1,0,0,1-6.11,2.76,66.61,66.61,0,0,0-14.35,9.42c-13.43,11.7-26.21,44.39-48.51,50.6h0a23.9,23.9,0,0,1-9.81,2c-9.41-.07-20.4-6.21-26.26-15.43C1,134.68,3.58,115.85,9.49,103.81c-.18.37-.37.74-.55,1.13a102.51,102.51,0,0,0-4.2,10.42v0A86.37,86.37,0,0,0,0,143.69c0,45.84,35.49,83,79.27,83,11.19,0,29-3.38,43.66-13.61a57.75,57.75,0,0,0,22.57-32C151.54,158.58,144.94,142.45,138.13,128.27Z"/>
+          <path class="cls-3" d="M51.46,158.37a27,27,0,0,1-5.67,3.38h0c22.3-6.21,35.07-38.9,48.51-50.6a66.61,66.61,0,0,1,14.35-9.42,58.67,58.67,0,0,1-21.26,4.09c-19.75,0-37.75-10.49-48.31-24,1,1.39,13,15.46,22.29,43.72A30,30,0,0,1,51.46,158.37Z"/>
+          <path class="cls-4" d="M145.33,59.56c-2.08,22.29-28.26,46.26-58,46.26-29.95,0-55.88-24.12-58-46.26-1.45-15.6,7.34-36,58-36S146.78,44,145.33,59.56Z"/>
+          <path class="cls-5" d="M135.36,0h0a51.59,51.59,0,0,0-4.68,32.1A37.21,37.21,0,0,1,134,34.24c10,7.23,12.12,17,11.34,25.32a35.2,35.2,0,0,1-1.6,7.61A73.45,73.45,0,0,0,142.08,12,71.18,71.18,0,0,0,135.36,0Z"/>
+          <path class="cls-6" d="M130.68,32.1A51.59,51.59,0,0,1,135.36,0h0a57.92,57.92,0,0,0-9.41,6.87,59.8,59.8,0,0,0-14,18.75q3.35.64,6.29,1.45A53.09,53.09,0,0,1,130.68,32.1Z"/>
+          <path class="cls-7" d="M39.39,0h0a51.59,51.59,0,0,1,4.68,32.1,37.21,37.21,0,0,0-3.31,2.14c-10,7.23-12.12,17-11.34,25.32A35.2,35.2,0,0,0,31,67.17,73.45,73.45,0,0,1,32.67,12,71.18,71.18,0,0,1,39.39,0Z"/>
+          <path class="cls-8" d="M48.81,6.87A57.92,57.92,0,0,0,39.39,0h0a51.59,51.59,0,0,1,4.68,32.1,53.09,53.09,0,0,1,12.45-5q2.94-.82,6.29-1.45A59.8,59.8,0,0,0,48.81,6.87Z"/>
+          <g class="cls-9">
+            <path class="cls-10" d="M84.24,182.6c-26.08,0-49.56,5.42-66,14.08,14.54,18.33,36.47,30,61,30,11.19,0,29-3.38,43.66-13.61A58.81,58.81,0,0,0,141,192.47C125.56,186.3,105.79,182.6,84.24,182.6Z"/>
+          </g>
+          <g>
+            <g class="cls-11">
+              <path class="cls-12" d="M138.51,52.94c-.56-2.94-2-5.19-5-5.88-7.88-1.85-27,9.84-37.8,15.34-4,2.06-6.16,3.05-8.34,3s-4.31-.94-8.34-3c-10.77-5.5-29.92-17.18-37.8-15.34-3,.7-4.44,2.94-5,5.88-1,5.16.35,18,9.89,27.49,7.14,7.11,16.68,10.46,24.69,12.71l.18.08a4.2,4.2,0,0,0-.09.88c0,3.28,3.83,5.94,8.56,5.94,2.34,0,6.35-.65,7.9-1.71h0c1.55,1.06,5.56,1.71,7.9,1.71,4.73,0,8.56-2.66,8.56-5.94a4.2,4.2,0,0,0-.09-.88l.18-.08c8-2.25,17.56-5.6,24.69-12.71C138.16,70.92,139.49,58.1,138.51,52.94Z"/>
+            </g>
+            <path class="cls-13" d="M75.26,75.35C64.56,86.85,47.81,77.09,45,63.28c-1.83-9.07,3.63-7.73,8.71-5.67C60.14,60.2,68.84,66.27,75.26,75.35Z"/>
+            <path class="cls-14" d="M60.43,68.26a15.16,15.16,0,0,1-2.19,8,15.56,15.56,0,0,1,0-15.92A15.16,15.16,0,0,1,60.43,68.26Z"/>
+            <path d="M87.36,86.64a8.15,8.15,0,0,0-6.27,2.49c8.25,5.17,4.31,5.17,12.55,0A8.15,8.15,0,0,0,87.36,86.64Z"/>
+            <path class="cls-15" d="M99.86,75.35c10.69,11.5,27.45,1.74,30.23-12.07,1.83-9.07-3.63-7.73-8.71-5.67C115,60.2,106.28,66.27,99.86,75.35Z"/>
+            <path class="cls-14" d="M114.69,68.26a15.16,15.16,0,0,0,2.19,8,15.56,15.56,0,0,0,0-15.92A15.16,15.16,0,0,0,114.69,68.26Z"/>
+          </g>
+          <path class="cls-16" d="M9.71,148.35c5.86,9.22,16.85,15.37,26.26,15.43a23.7,23.7,0,0,0,8.21-1.41l0,0c-15,4.18-19.32-25.16-10.92-43.06v0c1.09-3.38,2.35-6.34,3.42-8.83.37-.86,2.53-5.15,2.09-9.8-.84-9-14-17.33-24-5.37A44.52,44.52,0,0,0,9.39,104C3.55,116.06,1.08,134.76,9.71,148.35Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/examples/components/footer.vue b/examples/components/footer.vue
index 64caddd65..c3e710c0e 100644
--- a/examples/components/footer.vue
+++ b/examples/components/footer.vue
@@ -139,10 +139,22 @@
       margin: 10px;
     }
   }
+  @media (max-width: 1140px) {
+    .footer {
+      height: auto;
+    }
+  }
+  
+  @media (max-width: 1000px) {
+    .footer-social {
+      display: none;
+    }
+  }
+  
   @media (max-width: 768px) {
     .footer {
-      .footer-social {
-        display: none;
+      .footer-main {
+        margin-bottom: 30px;
       }
     }
   }
diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md
index babda5a2e..d6ecb6d56 100644
--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -1407,7 +1407,7 @@ Filter the table to find desired data.
 ### Custom column template
 
 Customize table column so it can be integrated with other components.
-:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Scoped slots is supported from `1.1`, `inline-template` still works, but it's not recommended).
+:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
 ```html
 <template>
   <el-table
@@ -1944,8 +1944,8 @@ You can customize row index in `type=index` columns.
 | current-row-key | key of current row, a set only prop | string,number | — | — |
 | row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |
 | row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — |
-| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, rowIndex})/String | — | — |
-| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | Function({row, rowIndex})/Object | — | — |
+| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, column, rowIndex, columnIndex})/String | — | — |
+| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | Function({row, column, rowIndex, columnIndex})/Object | — | — |
 | header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | Function({row, rowIndex})/String | — | — |
 | header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — |
 | header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | Function({row, rowIndex})/String | — | — |
diff --git a/examples/docs/es/table.md b/examples/docs/es/table.md
index 4d89ddb26..71b1bef5c 100644
--- a/examples/docs/es/table.md
+++ b/examples/docs/es/table.md
@@ -1408,7 +1408,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). (Los Scoped Slots son soportados desde `1.1`, `inline-template` todavía funciona, pero no es recomendado).
+:::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).
 ```html
 <template>
   <el-table
@@ -1949,8 +1949,8 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | current-row-key        | clave de la fila actual, un ajuste de propiedad única | string,number                            | —                              | —                                        |
 | row-class-name         | función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila | Function({row, rowIndex})/String         | —                              | —                                        |
 | row-style              | función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila | Function({row, rowIndex})/Object         | —                              | —                                        |
-| cell-class-name        | función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda | Function({row, rowIndex})/String         | —                              | —                                        |
-| cell-style             | función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda | Function({row, rowIndex})/Object         | —                              | —                                        |
+| cell-class-name        | función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda | Function({row, column, rowIndex, columnIndex})/String         | —                              | —                                        |
+| cell-style             | función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda | Function({row, column, rowIndex, columnIndex})/Object         | —                              | —                                        |
 | header-row-class-name  | función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla | Function({row, rowIndex})/String         | —                              | —                                        |
 | header-row-style       | función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla | Function({row, rowIndex})/Object         | —                              | —                                        |
 | header-cell-class-name | función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla | Function({row, rowIndex})/String         | —                              | —                                        |
diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md
index c1eda7ba4..5f574c6fe 100644
--- a/examples/docs/zh-CN/table.md
+++ b/examples/docs/zh-CN/table.md
@@ -1449,7 +1449,7 @@
 ### 自定义列模板
 
 自定义列的显示内容，可组合其他组件使用。
-:::demo 通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。(`1.1` 后支持通过 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 自定义模板。之前的 `inline-template` 同样适用，但不推荐。)
+:::demo 通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。
 ```html
 <template>
   <el-table
@@ -2008,7 +2008,7 @@
 | row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
 | row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
 | cell-class-name | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
-| cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, rowIndex, rowIndex, columnIndex})/Object | — | — |
+| cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
 | header-row-class-name | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
 | header-row-style | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
 | header-cell-class-name | 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
diff --git a/examples/pages/template/index.tpl b/examples/pages/template/index.tpl
index 6584b4049..5ea834201 100644
--- a/examples/pages/template/index.tpl
+++ b/examples/pages/template/index.tpl
@@ -19,10 +19,34 @@
       margin: 10px 0 5px;
     }
   }
+  .sponsor {
+    margin: 0 auto 50px;
+    display: flex;
+    width: 400px;
+    height: 100px;
+    justify-content: center;
+
+    img {
+      margin-right: 20px;
+    }
+  
+    div {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  
+    p {
+      margin: 0;
+      line-height: 1.8;
+      color: #999;
+      font-size: 14px;
+    }
+  }
   .jumbotron {
     width: 890px;
     height: 465px;
-    margin: 30px auto 100px;
+    margin: 30px auto;
     position: relative;
 
     div {
@@ -183,6 +207,7 @@
       width: 100%;
       .container {
         width: 100%;
+        margin: 0;
       }
     }
     .banner .container {
@@ -259,6 +284,13 @@
         <img class="jumbotron-compo-3" src="~examples/assets/images/compo-3.png" alt="">
       </div>
     </div>
+    <a class="sponsor" href="https://tipe.io/?ref=element" target="_blank">
+      <img width="35px" src="~examples/assets/images/tipe.svg" alt="tipe.io">
+      <div>
+        <p>Sponsored by Tipe.io</p>
+        <p>Next Generation Headless CMS</p>
+      </div>
+    </a>
     <div class="cards">
       <ul class="container">
         <li>