From eacd21f1184cf4fef22e809e0c1ffe2098bd0981 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Wed, 1 Sep 2021 15:17:13 +0800
Subject: [PATCH] style(table): allow custom tr background-color (#3166)

* style(table): allow custom tr background-color

* style(table): format table docs & add status tr example by var
---
 packages/theme-chalk/src/common/var.scss |    1 +
 packages/theme-chalk/src/table.scss      |    4 +-
 website/demo-styles/table.scss           |    4 +-
 website/docs/en-US/table.md              | 2428 ++++++++++------------
 website/docs/fr-FR/table.md              | 2422 ++++++++++-----------
 website/docs/jp/table.md                 |    5 +-
 website/docs/zh-CN/table.md              | 2378 ++++++++++-----------
 7 files changed, 3393 insertions(+), 3849 deletions(-)

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 3496259aeb..0001391c91 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -668,6 +668,7 @@ $--table: map.merge(
     'header-background-color': var(--el-color-white),
     'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
     'background-color': var(--el-color-white),
+    'tr-background-color': var(--el-color-white),
     'expanded-cell-background-color': var(--el-color-white),
   ),
   $--table
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index d8aeec06f1..4c6051cf02 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -171,7 +171,7 @@
   }
 
   tr {
-    background-color: var(--el-color-white);
+    background-color: var(--el-table-tr-background-color);
 
     input[type='checkbox'] {
       margin: 0;
@@ -328,7 +328,7 @@
     position: absolute;
     top: -1px;
     right: 0;
-    background-color: var(--el-color-white);
+    background-color: var(--el-table-header-background-color);
     border-bottom: var(--el-table-border);
   }
 
diff --git a/website/demo-styles/table.scss b/website/demo-styles/table.scss
index e3a5775851..0ebb8cebd5 100644
--- a/website/demo-styles/table.scss
+++ b/website/demo-styles/table.scss
@@ -1,9 +1,9 @@
 .#{$namespace}-table .warning-row {
-  background: var(--el-color-warning-lighter);
+  --el-table-tr-background-color: var(--el-color-warning-lighter);
 }
 
 .#{$namespace}-table .success-row {
-  background: var(--el-color-success-lighter);
+  --el-table-tr-background-color: var(--el-color-success-lighter);
 }
 
 .demo-table .name-wrapper {
diff --git a/website/docs/en-US/table.md b/website/docs/en-US/table.md
index 4d8ab0f733..09dbd6dd0e 100644
--- a/website/docs/en-US/table.md
+++ b/website/docs/en-US/table.md
@@ -8,81 +8,12 @@ Basic table is just for data display.
 
 :::demo After setting attribute `data` of `el-table` with an object array, you can use `prop` (corresponding to a key of the object in `data` array) in `el-table-column` to insert data to table columns, and set the attribute `label` to define the column name. You can also use the attribute `width` to define the width of columns.
 
-```html
-  <template>
-    <el-table
-      :data="tableData"
-      style="width: 100%">
-      <el-table-column
-        prop="date"
-        label="Date"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="Name"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="Address">
-      </el-table-column>
-    </el-table>
-  </template>
-
-  <script>
-    export default {
-      data() {
-        return {
-          tableData: [{
-            date: '2016-05-03',
-            name: 'Tom',
-            address: 'No. 189, Grove St, Los Angeles'
-          }, {
-            date: '2016-05-02',
-            name: 'Tom',
-            address: 'No. 189, Grove St, Los Angeles'
-          }, {
-            date: '2016-05-04',
-            name: 'Tom',
-            address: 'No. 189, Grove St, Los Angeles'
-          }, {
-            date: '2016-05-01',
-            name: 'Tom',
-            address: 'No. 189, Grove St, Los Angeles'
-          }]
-        }
-      }
-    }
-  </script>
-```
-:::
-
-### Striped Table
-
-Striped table makes it easier to distinguish different rows.
-
-:::demo Attribute `stripe` accepts a `Boolean`. If `true`, table will be striped.
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    stripe
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Address">
-    </el-table-column>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Name" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Address"> </el-table-column>
   </el-table>
 </template>
 
@@ -90,28 +21,83 @@ Striped table makes it easier to distinguish different rows.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
+:::
+
+### Striped Table
+
+Striped table makes it easier to distinguish different rows.
+
+:::demo Attribute `stripe` accepts a `Boolean`. If `true`, table will be striped.
+
+```html
+<template>
+  <el-table :data="tableData" stripe style="width: 100%">
+    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Name" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Address"> </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
+      }
+    },
+  }
+</script>
+```
+
 :::
 
 ### Table with border
@@ -120,24 +106,10 @@ Striped table makes it easier to distinguish different rows.
 
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    border
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Address">
-    </el-table-column>
+  <el-table :data="tableData" border style="width: 100%">
+    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Name" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Address"> </el-table-column>
   </el-table>
 </template>
 
@@ -145,28 +117,34 @@ Striped table makes it easier to distinguish different rows.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Table with status
@@ -174,75 +152,71 @@ Striped table makes it easier to distinguish different rows.
 You can highlight your table content to distinguish between "success, information, warning, danger" and other states.
 
 :::demo Use `row-class-name` in `el-table` to add custom classes to a certain row. Then you can style it with custom classes.
+
 ```html
 <template>
   <el-table
     :data="tableData"
     style="width: 100%"
-    :row-class-name="tableRowClassName">
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Address">
-    </el-table-column>
+    :row-class-name="tableRowClassName"
+  >
+    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Name" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Address"> </el-table-column>
   </el-table>
 </template>
 
 <style>
   .el-table .warning-row {
-    background: oldlace;
+    --el-table-tr-background-color: var(--el-color-warning-lighter);
   }
-
   .el-table .success-row {
-    background: #f0f9eb;
+    --el-table-tr-background-color: var(--el-color-success-lighter);
   }
 </style>
 
 <script>
   export default {
     methods: {
-      tableRowClassName({row, rowIndex}) {
+      tableRowClassName({ row, rowIndex }) {
         if (rowIndex === 1) {
-          return 'warning-row';
+          return 'warning-row'
         } else if (rowIndex === 3) {
-          return 'success-row';
+          return 'success-row'
         }
-        return '';
-      }
+        return ''
+      },
     },
     data() {
       return {
-        tableData:  [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Table with fixed header
@@ -250,26 +224,13 @@ You can highlight your table content to distinguish between "success, informatio
 When there are too many rows, you can use a fixed header.
 
 :::demo By setting the attribute `height` of `el-table`, you can fix the table header without any other codes.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    height="250"
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Address">
-    </el-table-column>
+  <el-table :data="tableData" height="250" style="width: 100%">
+    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Name" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Address"> </el-table-column>
   </el-table>
 </template>
 
@@ -277,40 +238,49 @@ When there are too many rows, you can use a fixed header.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }],
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-08',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-06',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-07',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Table with fixed column
@@ -318,48 +288,23 @@ When there are too many rows, you can use a fixed header.
 When there are too many columns, you can fix some of them.
 
 :::demo Attribute `fixed` is used in `el-table-column`, it accepts a `Boolean`. If `true`, the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
-    <el-table-column
-      fixed
-      prop="date"
-      label="Date"
-      width="150">
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column fixed prop="date" label="Date" width="150">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name"
-      width="120">
+    <el-table-column prop="name" label="Name" width="120"> </el-table-column>
+    <el-table-column prop="state" label="State" width="120"> </el-table-column>
+    <el-table-column prop="city" label="City" width="120"> </el-table-column>
+    <el-table-column prop="address" label="Address" width="600">
     </el-table-column>
-    <el-table-column
-      prop="state"
-      label="State"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="city"
-      label="City"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Address"
-      width="600">
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="Zip"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      fixed="right"
-      label="Operations"
-      width="120">
+    <el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
+    <el-table-column fixed="right" label="Operations" width="120">
       <template #default="scope">
-        <el-button @click="handleClick" type="text" size="small">Detail</el-button>
+        <el-button @click="handleClick" type="text" size="small"
+          >Detail</el-button
+        >
         <el-button type="text" size="small">Edit</el-button>
       </template>
     </el-table-column>
@@ -370,93 +315,74 @@ When there are too many columns, you can fix some of them.
   export default {
     methods: {
       handleClick() {
-        console.log('click');
-      }
+        console.log('click')
+      },
     },
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Home',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Office',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Home',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Office',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Table with fixed columns and header
 
 When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.
 
-:::demo  Fix columns and header at the same time by combining the above two examples.
+:::demo Fix columns and header at the same time by combining the above two examples.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%"
-    height="250">
-    <el-table-column
-      fixed
-      prop="date"
-      label="Date"
-      width="150">
+  <el-table :data="tableData" style="width: 100%" height="250">
+    <el-table-column fixed prop="date" label="Date" width="150">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="state"
-      label="State"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="city"
-      label="City"
-      width="320">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Address"
-      width="600">
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="Zip"
-      width="120">
+    <el-table-column prop="name" label="Name" width="120"> </el-table-column>
+    <el-table-column prop="state" label="State" width="120"> </el-table-column>
+    <el-table-column prop="city" label="City" width="320"> </el-table-column>
+    <el-table-column prop="address" label="Address" width="600">
     </el-table-column>
+    <el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
   </el-table>
 </template>
 
@@ -464,114 +390,96 @@ When you have huge chunks of data to put in a table, you can fix the header and
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-08',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-06',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-07',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Fluid-height Table with fixed header (and columns)
 
 When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.
 
-:::demo  By setting the attribute `max-height` of `el-table`, you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.
+:::demo By setting the attribute `max-height` of `el-table`, you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%"
-    max-height="250">
-    <el-table-column
-      fixed
-      prop="date"
-      label="Date"
-      width="150">
+  <el-table :data="tableData" style="width: 100%" max-height="250">
+    <el-table-column fixed prop="date" label="Date" width="150">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name"
-      width="120">
+    <el-table-column prop="name" label="Name" width="120"> </el-table-column>
+    <el-table-column prop="state" label="State" width="120"> </el-table-column>
+    <el-table-column prop="city" label="City" width="120"> </el-table-column>
+    <el-table-column prop="address" label="Address" width="600">
     </el-table-column>
-    <el-table-column
-      prop="state"
-      label="State"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="city"
-      label="City"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Address"
-      width="600">
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="Zip"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      fixed="right"
-      label="Operations"
-      width="120">
+    <el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
+    <el-table-column fixed="right" label="Operations" width="120">
       <template #default="scope">
         <el-button
           @click.prevent="deleteRow(scope.$index, tableData)"
           type="text"
-          size="small">
+          size="small"
+        >
           Remove
         </el-button>
       </template>
@@ -583,66 +491,75 @@ When the the data is dynamically changed, you might want the table to have a max
   export default {
     methods: {
       deleteRow(index, rows) {
-        rows.splice(index, 1);
-      }
+        rows.splice(index, 1)
+      },
     },
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-08',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-06',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-07',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Grouping table head
@@ -650,42 +567,20 @@ When the the data is dynamically changed, you might want the table to have a max
 When the data structure is complex, you can use group header to show the data hierarchy.
 
 :::demo Only need to place el-table-column inside a el-table-column, you can achieve group header.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="150">
-    </el-table-column>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="date" label="Date" width="150"> </el-table-column>
     <el-table-column label="Delivery Info">
-      <el-table-column
-        prop="name"
-        label="Name"
-        width="120">
-      </el-table-column>
+      <el-table-column prop="name" label="Name" width="120"> </el-table-column>
       <el-table-column label="Address Info">
-        <el-table-column
-          prop="state"
-          label="State"
-          width="120">
+        <el-table-column prop="state" label="State" width="120">
         </el-table-column>
-        <el-table-column
-          prop="city"
-          label="City"
-          width="120">
-        </el-table-column>
-        <el-table-column
-          prop="address"
-          label="Address">
-        </el-table-column>
-        <el-table-column
-          prop="zip"
-          label="Zip"
-          width="120">
+        <el-table-column prop="city" label="City" width="120">
         </el-table-column>
+        <el-table-column prop="address" label="Address"> </el-table-column>
+        <el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
       </el-table-column>
     </el-table-column>
   </el-table>
@@ -695,61 +590,70 @@ When the data structure is complex, you can use group header to show the data hi
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-08',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-06',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-07',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Single select
@@ -757,6 +661,7 @@ When the data structure is complex, you can use group header to show the data hi
 Single row selection is supported.
 
 :::demo Table supports single row selection. You can activate it by adding the `highlight-current-row` attribute. An event called `current-change` will be triggered when row selection changes, and its parameters are the rows after and before this change: `currentRow` and `oldCurrentRow`. If you need to display row index, you can add a new `el-table-column` with its `type` attribute assigned to `index`, and you will see the index starting from 1.
+
 ```html
 <template>
   <el-table
@@ -764,25 +669,14 @@ Single row selection is supported.
     :data="tableData"
     highlight-current-row
     @current-change="handleCurrentChange"
-    style="width: 100%">
-    <el-table-column
-      type="index"
-      width="50">
+    style="width: 100%"
+  >
+    <el-table-column type="index" width="50"> </el-table-column>
+    <el-table-column property="date" label="Date" width="120">
     </el-table-column>
-    <el-table-column
-      property="date"
-      label="Date"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      property="name"
-      label="Name"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      property="address"
-      label="Address">
+    <el-table-column property="name" label="Name" width="120">
     </el-table-column>
+    <el-table-column property="address" label="Address"> </el-table-column>
   </el-table>
   <div style="margin-top: 20px">
     <el-button @click="setCurrent(tableData[1])">Select second row</el-button>
@@ -794,38 +688,44 @@ Single row selection is supported.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }],
-        currentRow: null
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
+        currentRow: null,
       }
     },
 
     methods: {
       setCurrent(row) {
-        this.$refs.singleTable.setCurrentRow(row);
+        this.$refs.singleTable.setCurrentRow(row)
       },
       handleCurrentChange(val) {
-        this.currentRow = val;
-      }
-    }
+        this.currentRow = val
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### Multiple select
@@ -833,35 +733,28 @@ Single row selection is supported.
 You can also select multiple rows.
 
 :::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `show-overflow-tooltip`: by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell.
+
 ```html
 <template>
   <el-table
     ref="multipleTable"
     :data="tableData"
     style="width: 100%"
-    @selection-change="handleSelectionChange">
-    <el-table-column
-      type="selection"
-      width="55">
-    </el-table-column>
-    <el-table-column
-      label="Date"
-      width="120">
+    @selection-change="handleSelectionChange"
+  >
+    <el-table-column type="selection" width="55"> </el-table-column>
+    <el-table-column label="Date" width="120">
       <template #default="scope">{{ scope.row.date }}</template>
     </el-table-column>
-    <el-table-column
-      property="name"
-      label="Name"
-      width="120">
+    <el-table-column property="name" label="Name" width="120">
     </el-table-column>
-    <el-table-column
-      property="address"
-      label="Address"
-      show-overflow-tooltip>
+    <el-table-column property="address" label="Address" show-overflow-tooltip>
     </el-table-column>
   </el-table>
   <div style="margin-top: 20px">
-    <el-button @click="toggleSelection([tableData[1], tableData[2]])">Toggle selection status of second and third rows</el-button>
+    <el-button @click="toggleSelection([tableData[1], tableData[2]])"
+      >Toggle selection status of second and third rows</el-button
+    >
     <el-button @click="toggleSelection()">Clear selection</el-button>
   </div>
 </template>
@@ -870,36 +763,44 @@ You can also select multiple rows.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }],
-        multipleSelection: []
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-08',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-06',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-07',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
+        multipleSelection: [],
       }
     },
 
@@ -907,19 +808,20 @@ You can also select multiple rows.
       toggleSelection(rows) {
         if (rows) {
           rows.forEach(row => {
-            this.$refs.multipleTable.toggleRowSelection(row);
-          });
+            this.$refs.multipleTable.toggleRowSelection(row)
+          })
         } else {
-          this.$refs.multipleTable.clearSelection();
+          this.$refs.multipleTable.clearSelection()
         }
       },
       handleSelectionChange(val) {
-        this.multipleSelection = val;
-      }
-    }
+        this.multipleSelection = val
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### Sorting
@@ -927,27 +829,18 @@ You can also select multiple rows.
 Sort the data to find or compare data quickly.
 
 :::demo Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. Set table attribute `default-sort` to determine default sort column and order. To apply your own sorting rules, use `sort-method` or `sort-by`. If you need remote sorting from backend, set `sortable` to `custom`, and listen to the `sort-change` event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
+
 ```html
 <template>
   <el-table
     :data="tableData"
-    :default-sort = "{prop: 'date', order: 'descending'}"
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="Date"
-      sortable
-      width="180">
+    :default-sort="{prop: 'date', order: 'descending'}"
+    style="width: 100%"
+  >
+    <el-table-column prop="date" label="Date" sortable width="180">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Address"
-      :formatter="formatter">
+    <el-table-column prop="name" label="Name" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Address" :formatter="formatter">
     </el-table-column>
   </el-table>
 </template>
@@ -956,33 +849,39 @@ Sort the data to find or compare data quickly.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
       }
     },
     methods: {
       formatter(row, column) {
-        return row.address;
-      }
-    }
+        return row.address
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### Filter
@@ -990,6 +889,7 @@ Sort the data to find or compare data quickly.
 Filter the table to find desired data.
 
 :::demo Set attribute `filters` and `filter-method` in `el-table-column` makes this column filterable. `filters` is an array, and `filter-method` is a function deciding which rows are displayed. It has three parameters: `value`, `row` and `column`.
+
 ```html
 <template>
   <el-button @click="resetDateFilter">reset date filter</el-button>
@@ -998,7 +898,8 @@ Filter the table to find desired data.
     row-key="date"
     ref="filterTable"
     :data="tableData"
-    style="width: 100%">
+    style="width: 100%"
+  >
     <el-table-column
       prop="date"
       label="Date"
@@ -1009,15 +910,8 @@ Filter the table to find desired data.
       :filter-method="filterHandler"
     >
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Address"
-      :formatter="formatter">
+    <el-table-column prop="name" label="Name" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Address" :formatter="formatter">
     </el-table-column>
     <el-table-column
       prop="tag"
@@ -1025,11 +919,14 @@ Filter the table to find desired data.
       width="100"
       :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
       :filter-method="filterTag"
-      filter-placement="bottom-end">
+      filter-placement="bottom-end"
+    >
       <template #default="scope">
         <el-tag
           :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
-          disable-transitions>{{scope.row.tag}}</el-tag>
+          disable-transitions
+          >{{scope.row.tag}}</el-tag
+        >
       </template>
     </el-table-column>
   </el-table>
@@ -1039,72 +936,73 @@ Filter the table to find desired data.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-          tag: 'Home'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-          tag: 'Office'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-          tag: 'Home'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-          tag: 'Office'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+            tag: 'Home',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+            tag: 'Office',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+            tag: 'Home',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+            tag: 'Office',
+          },
+        ],
       }
     },
     methods: {
       resetDateFilter() {
-        this.$refs.filterTable.clearFilter('date');
+        this.$refs.filterTable.clearFilter('date')
       },
       clearFilter() {
-        this.$refs.filterTable.clearFilter();
+        this.$refs.filterTable.clearFilter()
       },
       formatter(row, column) {
-        return row.address;
+        return row.address
       },
       filterTag(value, row) {
-        return row.tag === value;
+        return row.tag === value
       },
       filterHandler(value, row, column) {
-        const property = column['property'];
-        return row[property] === value;
-      }
-    }
+        const property = column['property']
+        return row[property] === value
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### 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 [slot](https://v3.vuejs.org/guide/component-slots.html).
+:::demo You have access to the following data: row, column, \$index and store (state management of Table) by [slot](https://v3.vuejs.org/guide/component-slots.html).
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
-    <el-table-column
-      label="Date"
-      width="180">
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column label="Date" width="180">
       <template #default="scope">
         <i class="el-icon-time"></i>
         <span style="margin-left: 10px">{{ scope.row.date }}</span>
       </template>
     </el-table-column>
-    <el-table-column
-      label="Name"
-      width="180">
+    <el-table-column label="Name" width="180">
       <template #default="scope">
         <el-popover effect="light" trigger="hover" placement="top">
           <template #default>
@@ -1119,16 +1017,17 @@ Customize table column so it can be integrated with other components.
         </el-popover>
       </template>
     </el-table-column>
-    <el-table-column
-      label="Operations">
+    <el-table-column label="Operations">
       <template #default="scope">
-        <el-button
-          size="mini"
-          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
+        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
+          >Edit</el-button
+        >
         <el-button
           size="mini"
           type="danger"
-          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
+          @click="handleDelete(scope.$index, scope.row)"
+          >Delete</el-button
+        >
       </template>
     </el-table-column>
   </el-table>
@@ -1138,71 +1037,71 @@ Customize table column so it can be integrated with other components.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
       }
     },
     methods: {
       handleEdit(index, row) {
-        console.log(index, row);
+        console.log(index, row)
       },
       handleDelete(index, row) {
-        console.log(index, row);
-      }
-    }
+        console.log(index, row)
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### Table with custom header
 
 Customize table header so it can be even more customized.
 :::demo You can customize how the header looks by header [slots](https://v3.vuejs.org/guide/component-slots.html).
+
 ```html
 <template>
   <el-table
     :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
-    style="width: 100%">
-    <el-table-column
-      label="Date"
-      prop="date">
-    </el-table-column>
-    <el-table-column
-      label="Name"
-      prop="name">
-    </el-table-column>
-    <el-table-column
-      align="right">
+    style="width: 100%"
+  >
+    <el-table-column label="Date" prop="date"> </el-table-column>
+    <el-table-column label="Name" prop="name"> </el-table-column>
+    <el-table-column align="right">
       <template #header>
-        <el-input
-          v-model="search"
-          size="mini"
-          placeholder="Type to search"/>
+        <el-input v-model="search" size="mini" placeholder="Type to search" />
       </template>
       <template #default="scope">
-        <el-button
-          size="mini"
-          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
+        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
+          >Edit</el-button
+        >
         <el-button
           size="mini"
           type="danger"
-          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
+          @click="handleDelete(scope.$index, scope.row)"
+          >Delete</el-button
+        >
       </template>
     </el-table-column>
   </el-table>
@@ -1212,48 +1111,53 @@ Customize table header so it can be even more customized.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'John',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Morgan',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Jessy',
-          address: 'No. 189, Grove St, Los Angeles'
-        }],
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'John',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Morgan',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Jessy',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
         search: '',
       }
     },
     methods: {
       handleEdit(index, row) {
-        console.log(index, row);
+        console.log(index, row)
       },
       handleDelete(index, row) {
-        console.log(index, row);
-      }
+        console.log(index, row)
+      },
     },
   }
 </script>
 ```
+
 :::
 
 ### Expandable row
 
 When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.
 :::demo Activate expandable row by adding type="expand" and slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using `slot` in custom column templates.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
+  <el-table :data="tableData" style="width: 100%">
     <el-table-column type="expand">
       <template #default="props">
         <p>State: {{ props.row.state }}</p>
@@ -1262,14 +1166,8 @@ When the row content is too long and you do not want to display the horizontal s
         <p>Zip: {{ props.row.zip }}</p>
       </template>
     </el-table-column>
-    <el-table-column
-      label="Date"
-      prop="date">
-    </el-table-column>
-    <el-table-column
-      label="Name"
-      prop="name">
-    </el-table-column>
+    <el-table-column label="Date" prop="date"> </el-table-column>
+    <el-table-column label="Name" prop="name"> </el-table-column>
   </el-table>
 </template>
 
@@ -1277,61 +1175,70 @@ When the row content is too long and you do not want to display the horizontal s
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-08',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-06',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-07',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Tree data and lazy mode
@@ -1340,96 +1247,95 @@ When the row content is too long and you do not want to display the horizontal s
 
 ```html
 <template>
-<div>
-  <el-table
-    :data="tableData"
-    style="width: 100%;margin-bottom: 20px;"
-    row-key="id"
-    border
-    default-expand-all>
-    <el-table-column
-      prop="date"
-      label="date"
-      sortable
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name"
-      sortable
-      width="180">
-    </el-table-column>
-  </el-table>
+  <div>
+    <el-table
+      :data="tableData"
+      style="width: 100%;margin-bottom: 20px;"
+      row-key="id"
+      border
+      default-expand-all
+    >
+      <el-table-column prop="date" label="date" sortable width="180">
+      </el-table-column>
+      <el-table-column prop="name" label="Name" sortable width="180">
+      </el-table-column>
+    </el-table>
 
-  <el-table
-    :data="tableData1"
-    style="width: 100%"
-    row-key="id"
-    border
-    lazy
-    :load="load"
-    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name"
-      width="180">
-    </el-table-column>
-  </el-table>
-</div>
+    <el-table
+      :data="tableData1"
+      style="width: 100%"
+      row-key="id"
+      border
+      lazy
+      :load="load"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+      <el-table-column prop="name" label="Name" width="180"> </el-table-column>
+    </el-table>
+  </div>
 </template>
 <script>
   export default {
     data() {
       return {
-        tableData: [{
-          id: 1,
-          date: '2016-05-02',
-          name: 'wangxiaohu'
-        }, {
-          id: 2,
-          date: '2016-05-04',
-          name: 'wangxiaohu'
-        }, {
-          id: 3,
-          date: '2016-05-01',
-          name: 'wangxiaohu',
-          children: [{
-              id: 31,
-              date: '2016-05-01',
-              name: 'wangxiaohu'
-            }, {
-              id: 32,
-              date: '2016-05-01',
-              name: 'wangxiaohu'
-          }]
-        }, {
-          id: 4,
-          date: '2016-05-03',
-          name: 'wangxiaohu'
-        }],
-        tableData1: [{
-          id: 1,
-          date: '2016-05-02',
-          name: 'wangxiaohu'
-        }, {
-          id: 2,
-          date: '2016-05-04',
-          name: 'wangxiaohu'
-        }, {
-          id: 3,
-          date: '2016-05-01',
-          name: 'wangxiaohu',
-          hasChildren: true
-        }, {
-          id: 4,
-          date: '2016-05-03',
-          name: 'wangxiaohu'
-        }]
+        tableData: [
+          {
+            id: 1,
+            date: '2016-05-02',
+            name: 'wangxiaohu',
+          },
+          {
+            id: 2,
+            date: '2016-05-04',
+            name: 'wangxiaohu',
+          },
+          {
+            id: 3,
+            date: '2016-05-01',
+            name: 'wangxiaohu',
+            children: [
+              {
+                id: 31,
+                date: '2016-05-01',
+                name: 'wangxiaohu',
+              },
+              {
+                id: 32,
+                date: '2016-05-01',
+                name: 'wangxiaohu',
+              },
+            ],
+          },
+          {
+            id: 4,
+            date: '2016-05-03',
+            name: 'wangxiaohu',
+          },
+        ],
+        tableData1: [
+          {
+            id: 1,
+            date: '2016-05-02',
+            name: 'wangxiaohu',
+          },
+          {
+            id: 2,
+            date: '2016-05-04',
+            name: 'wangxiaohu',
+          },
+          {
+            id: 3,
+            date: '2016-05-01',
+            name: 'wangxiaohu',
+            hasChildren: true,
+          },
+          {
+            id: 4,
+            date: '2016-05-03',
+            name: 'wangxiaohu',
+          },
+        ],
       }
     },
     methods: {
@@ -1439,55 +1345,38 @@ When the row content is too long and you do not want to display the horizontal s
             {
               id: 31,
               date: '2016-05-01',
-              name: 'wangxiaohu'
-            }, {
+              name: 'wangxiaohu',
+            },
+            {
               id: 32,
               date: '2016-05-01',
-              name: 'wangxiaohu'
-            }
+              name: 'wangxiaohu',
+            },
           ])
         }, 1000)
-      }
+      },
     },
   }
 </script>
 ```
+
 :::
 
 ### Summary row
 
 For table of numbers, you can add an extra row at the table footer displaying each column's sum.
 :::demo You can add the summary row by setting `show-summary` to `true`. By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using `sum-text`), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to `summary-method`, which returns an array, and each element of the returned array will be displayed in the columns of the summary row. The second table of this example is a detailed demo.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    border
-    show-summary
-    style="width: 100%">
-    <el-table-column
-      prop="id"
-      label="ID"
-      width="180">
+  <el-table :data="tableData" border show-summary style="width: 100%">
+    <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Name"> </el-table-column>
+    <el-table-column prop="amount1" sortable label="Amount 1">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name">
+    <el-table-column prop="amount2" sortable label="Amount 2">
     </el-table-column>
-    <el-table-column
-      prop="amount1"
-      sortable
-      label="Amount 1">
-    </el-table-column>
-    <el-table-column
-      prop="amount2"
-      sortable
-      label="Amount 2">
-    </el-table-column>
-    <el-table-column
-      prop="amount3"
-      sortable
-      label="Amount 3">
+    <el-table-column prop="amount3" sortable label="Amount 3">
     </el-table-column>
   </el-table>
 
@@ -1497,28 +1386,13 @@ For table of numbers, you can add an extra row at the table footer displaying ea
     height="200"
     :summary-method="getSummaries"
     show-summary
-    style="width: 100%; margin-top: 20px">
-    <el-table-column
-      prop="id"
-      label="ID"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name">
-    </el-table-column>
-    <el-table-column
-      prop="amount1"
-      label="Cost 1 ($)">
-    </el-table-column>
-    <el-table-column
-      prop="amount2"
-      label="Cost 2 ($)">
-    </el-table-column>
-    <el-table-column
-      prop="amount3"
-      label="Cost 3 ($)">
-    </el-table-column>
+    style="width: 100%; margin-top: 20px"
+  >
+    <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Name"> </el-table-column>
+    <el-table-column prop="amount1" label="Cost 1 ($)"> </el-table-column>
+    <el-table-column prop="amount2" label="Cost 2 ($)"> </el-table-column>
+    <el-table-column prop="amount3" label="Cost 3 ($)"> </el-table-column>
   </el-table>
 </template>
 
@@ -1526,69 +1400,78 @@ For table of numbers, you can add an extra row at the table footer displaying ea
   export default {
     data() {
       return {
-        tableData: [{
-          id: '12987122',
-          name: 'Tom',
-          amount1: '234',
-          amount2: '3.2',
-          amount3: 10
-        }, {
-          id: '12987123',
-          name: 'Tom',
-          amount1: '165',
-          amount2: '4.43',
-          amount3: 12
-        }, {
-          id: '12987124',
-          name: 'Tom',
-          amount1: '324',
-          amount2: '1.9',
-          amount3: 9
-        }, {
-          id: '12987125',
-          name: 'Tom',
-          amount1: '621',
-          amount2: '2.2',
-          amount3: 17
-        }, {
-          id: '12987126',
-          name: 'Tom',
-          amount1: '539',
-          amount2: '4.1',
-          amount3: 15
-        }]
-      };
+        tableData: [
+          {
+            id: '12987122',
+            name: 'Tom',
+            amount1: '234',
+            amount2: '3.2',
+            amount3: 10,
+          },
+          {
+            id: '12987123',
+            name: 'Tom',
+            amount1: '165',
+            amount2: '4.43',
+            amount3: 12,
+          },
+          {
+            id: '12987124',
+            name: 'Tom',
+            amount1: '324',
+            amount2: '1.9',
+            amount3: 9,
+          },
+          {
+            id: '12987125',
+            name: 'Tom',
+            amount1: '621',
+            amount2: '2.2',
+            amount3: 17,
+          },
+          {
+            id: '12987126',
+            name: 'Tom',
+            amount1: '539',
+            amount2: '4.1',
+            amount3: 15,
+          },
+        ],
+      }
     },
     methods: {
       getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
+        const { columns, data } = param
+        const sums = []
         columns.forEach((column, index) => {
           if (index === 0) {
-            sums[index] = 'Total Cost';
-            return;
+            sums[index] = 'Total Cost'
+            return
           }
-          const values = data.map(item => Number(item[column.property]));
+          const values = data.map(item => Number(item[column.property]))
           if (!values.every(value => isNaN(value))) {
-            sums[index] = '$ ' + values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
-              }
-            }, 0);
+            sums[index] =
+              '$ ' +
+              values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return prev + curr
+                } else {
+                  return prev
+                }
+              }, 0)
           } else {
-            sums[index] = 'N/A';
+            sums[index] = 'N/A'
           }
-        });
+        })
 
-        return sums;
-      }
-    }
-  };
+        return sums
+      },
+    },
+  }
 </script>
 ```
+
 :::
 
 ### Rowspan and colspan
@@ -1603,30 +1486,15 @@ Configuring rowspan and colspan allows you to merge cells
       :data="tableData"
       :span-method="arraySpanMethod"
       border
-      style="width: 100%">
-      <el-table-column
-        prop="id"
-        label="ID"
-        width="180">
+      style="width: 100%"
+    >
+      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+      <el-table-column prop="name" label="Name"> </el-table-column>
+      <el-table-column prop="amount1" sortable label="Amount 1">
       </el-table-column>
-      <el-table-column
-        prop="name"
-        label="Name">
+      <el-table-column prop="amount2" sortable label="Amount 2">
       </el-table-column>
-      <el-table-column
-        prop="amount1"
-        sortable
-        label="Amount 1">
-      </el-table-column>
-      <el-table-column
-        prop="amount2"
-        sortable
-        label="Amount 2">
-      </el-table-column>
-      <el-table-column
-        prop="amount3"
-        sortable
-        label="Amount 3">
+      <el-table-column prop="amount3" sortable label="Amount 3">
       </el-table-column>
     </el-table>
 
@@ -1634,28 +1502,13 @@ Configuring rowspan and colspan allows you to merge cells
       :data="tableData"
       :span-method="objectSpanMethod"
       border
-      style="width: 100%; margin-top: 20px">
-      <el-table-column
-        prop="id"
-        label="ID"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="Name">
-      </el-table-column>
-      <el-table-column
-        prop="amount1"
-        label="Amount 1">
-      </el-table-column>
-      <el-table-column
-        prop="amount2"
-        label="Amount 2">
-      </el-table-column>
-      <el-table-column
-        prop="amount3"
-        label="Amount 3">
-      </el-table-column>
+      style="width: 100%; margin-top: 20px"
+    >
+      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+      <el-table-column prop="name" label="Name"> </el-table-column>
+      <el-table-column prop="amount1" label="Amount 1"> </el-table-column>
+      <el-table-column prop="amount2" label="Amount 2"> </el-table-column>
+      <el-table-column prop="amount3" label="Amount 3"> </el-table-column>
     </el-table>
   </div>
 </template>
@@ -1664,46 +1517,52 @@ Configuring rowspan and colspan allows you to merge cells
   export default {
     data() {
       return {
-        tableData: [{
-          id: '12987122',
-          name: 'Tom',
-          amount1: '234',
-          amount2: '3.2',
-          amount3: 10
-        }, {
-          id: '12987123',
-          name: 'Tom',
-          amount1: '165',
-          amount2: '4.43',
-          amount3: 12
-        }, {
-          id: '12987124',
-          name: 'Tom',
-          amount1: '324',
-          amount2: '1.9',
-          amount3: 9
-        }, {
-          id: '12987125',
-          name: 'Tom',
-          amount1: '621',
-          amount2: '2.2',
-          amount3: 17
-        }, {
-          id: '12987126',
-          name: 'Tom',
-          amount1: '539',
-          amount2: '4.1',
-          amount3: 15
-        }]
-      };
+        tableData: [
+          {
+            id: '12987122',
+            name: 'Tom',
+            amount1: '234',
+            amount2: '3.2',
+            amount3: 10,
+          },
+          {
+            id: '12987123',
+            name: 'Tom',
+            amount1: '165',
+            amount2: '4.43',
+            amount3: 12,
+          },
+          {
+            id: '12987124',
+            name: 'Tom',
+            amount1: '324',
+            amount2: '1.9',
+            amount3: 9,
+          },
+          {
+            id: '12987125',
+            name: 'Tom',
+            amount1: '621',
+            amount2: '2.2',
+            amount3: 17,
+          },
+          {
+            id: '12987126',
+            name: 'Tom',
+            amount1: '539',
+            amount2: '4.1',
+            amount3: 15,
+          },
+        ],
+      }
     },
     methods: {
       arraySpanMethod({ row, column, rowIndex, columnIndex }) {
         if (rowIndex % 2 === 0) {
           if (columnIndex === 0) {
-            return [1, 2];
+            return [1, 2]
           } else if (columnIndex === 1) {
-            return [0, 0];
+            return [0, 0]
           }
         }
       },
@@ -1713,20 +1572,21 @@ Configuring rowspan and colspan allows you to merge cells
           if (rowIndex % 2 === 0) {
             return {
               rowspan: 2,
-              colspan: 1
-            };
+              colspan: 1,
+            }
           } else {
             return {
               rowspan: 0,
-              colspan: 0
-            };
+              colspan: 0,
+            }
           }
         }
-      }
-    }
-  };
+      },
+    },
+  }
 </script>
 ```
+
 :::
 
 ### Custom index
@@ -1736,27 +1596,11 @@ You can customize row index in `type=index` columns.
 
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
-    <el-table-column
-      type="index"
-      :index="indexMethod">
-    </el-table-column>
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Name"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Address">
-    </el-table-column>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column type="index" :index="indexMethod"> </el-table-column>
+    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Name" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Address"> </el-table-column>
   </el-table>
 </template>
 
@@ -1764,161 +1608,173 @@ You can customize row index in `type=index` columns.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }],
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Home',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Office',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Home',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Office',
+          },
+        ],
       }
     },
     methods: {
       indexMethod(index) {
-        return index * 2;
-      }
-    }
-  };
+        return index * 2
+      },
+    },
+  }
 </script>
 ```
+
 :::
 
 ### Table Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
-|----------------|----------------------|-----------|-----------------------|----------|
-| data | Table data | array | — | — |
-| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string / number | — | — |
-| max-height | Table's max-height. The legal value is a number or the height in px. | string / number | — | — |
-| stripe | whether Table is striped | boolean | — | false |
-| border | whether Table has vertical border | boolean | — | false |
-| size | size of Table | string | medium / small / mini | — |
-| fit | whether width of column automatically fits its container | boolean | — | true |
-| show-header | whether Table header is visible | boolean | — | true |
-| highlight-current-row | whether current row is highlighted | boolean | — | false |
-| 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, 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, column, rowIndex, columnIndex }) / string | — | — |
-| 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 `#empty` | string | — | No Data |
-| 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 |
-| show-summary | whether to display a summary row | boolean | — | false |
-| sum-text | displayed text for the first column of summary row | string | — | Sum |
-| summary-method | custom summary method | function({ columns, data }) | — | — |
-| span-method | method that returns rowspan and colspan | function({ row, column, rowIndex, columnIndex }) | — | — |
-| 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) | — | — |
-| tree-props  | configuration for rendering nested data| object | — | { hasChildren: 'hasChildren', children: 'children' } |
+
+| Attribute               | Description                                                                                                                                                                                                                                                                 | Type                                                      | Accepted Values                 | Default                                                                        |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------ |
+| data                    | Table data                                                                                                                                                                                                                                                                  | array                                                     | —                               | —                                                                              |
+| height                  | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles                                   | string / number                                           | —                               | —                                                                              |
+| max-height              | Table's max-height. The legal value is a number or the height in px.                                                                                                                                                                                                        | string / number                                           | —                               | —                                                                              |
+| stripe                  | whether Table is striped                                                                                                                                                                                                                                                    | boolean                                                   | —                               | false                                                                          |
+| border                  | whether Table has vertical border                                                                                                                                                                                                                                           | boolean                                                   | —                               | false                                                                          |
+| size                    | size of Table                                                                                                                                                                                                                                                               | string                                                    | medium / small / mini           | —                                                                              |
+| fit                     | whether width of column automatically fits its container                                                                                                                                                                                                                    | boolean                                                   | —                               | true                                                                           |
+| show-header             | whether Table header is visible                                                                                                                                                                                                                                             | boolean                                                   | —                               | true                                                                           |
+| highlight-current-row   | whether current row is highlighted                                                                                                                                                                                                                                          | boolean                                                   | —                               | false                                                                          |
+| 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, 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, column, rowIndex, columnIndex }) / string | —                               | —                                                                              |
+| 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 `#empty`                                                                                                                                                                                                | string                                                    | —                               | No Data                                                                        |
+| 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                                                                           |
+| show-summary            | whether to display a summary row                                                                                                                                                                                                                                            | boolean                                                   | —                               | false                                                                          |
+| sum-text                | displayed text for the first column of summary row                                                                                                                                                                                                                          | string                                                    | —                               | Sum                                                                            |
+| summary-method          | custom summary method                                                                                                                                                                                                                                                       | function({ columns, data })                               | —                               | —                                                                              |
+| span-method             | method that returns rowspan and colspan                                                                                                                                                                                                                                     | function({ row, column, rowIndex, columnIndex })          | —                               | —                                                                              |
+| 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)                          | —                               | —                                                                              |
+| tree-props              | configuration for rendering nested data                                                                                                                                                                                                                                     | object                                                    | —                               | { hasChildren: 'hasChildren', children: 'children' }                           |
 
 ### Table Events
-| Event Name | Description | Parameters |
-| ---- | ---- | ---- |
-| select | triggers when user clicks the checkbox in a row | selection, row |
-| select-all | triggers when user clicks the checkbox in table header | selection |
-| selection-change | triggers when selection changes | selection |
-| cell-mouse-enter | triggers when hovering into a cell| row, column, cell, event |
-| cell-mouse-leave | triggers when hovering out of a cell | row, column, cell, event |
-| cell-click | triggers when clicking a cell | row, column, cell, event |
-| cell-dblclick | triggers when double clicking a cell | row, column, cell, event |
-| cell-contextmenu | triggers when user right clicks on a cell | row, column, cell, event |
-| row-click | triggers when clicking a row | row, column, event |
-| row-contextmenu | triggers when user right clicks on a row | row, column, event |
-| row-dblclick | triggers when double clicking a row | row, column, event |
-| header-click | triggers when clicking a column header | column, event |
-| header-contextmenu | triggers when user right clicks on a column header | column, event |
-| sort-change | triggers when Table's sorting changes | { column, prop, order } |
-| 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 (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | row, (expandedRows \| expanded) |
+
+| Event Name         | Description                                                                                                                                  | Parameters                        |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| select             | triggers when user clicks the checkbox in a row                                                                                              | selection, row                    |
+| select-all         | triggers when user clicks the checkbox in table header                                                                                       | selection                         |
+| selection-change   | triggers when selection changes                                                                                                              | selection                         |
+| cell-mouse-enter   | triggers when hovering into a cell                                                                                                           | row, column, cell, event          |
+| cell-mouse-leave   | triggers when hovering out of a cell                                                                                                         | row, column, cell, event          |
+| cell-click         | triggers when clicking a cell                                                                                                                | row, column, cell, event          |
+| cell-dblclick      | triggers when double clicking a cell                                                                                                         | row, column, cell, event          |
+| cell-contextmenu   | triggers when user right clicks on a cell                                                                                                    | row, column, cell, event          |
+| row-click          | triggers when clicking a row                                                                                                                 | row, column, event                |
+| row-contextmenu    | triggers when user right clicks on a row                                                                                                     | row, column, event                |
+| row-dblclick       | triggers when double clicking a row                                                                                                          | row, column, event                |
+| header-click       | triggers when clicking a column header                                                                                                       | column, event                     |
+| header-contextmenu | triggers when user right clicks on a column header                                                                                           | column, event                     |
+| sort-change        | triggers when Table's sorting changes                                                                                                        | { column, prop, order }           |
+| 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 (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | row, (expandedRows \| expanded)   |
 
 ### Table Methods
-| Method | Description | Parameters |
-|------|--------|-------|
-| 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 select all and deselect all | — |
-| 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 |
-| doLayout | refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout | — |
-| sort | sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order | prop: string, order: string |
+
+| Method             | Description                                                                                                                                                       | Parameters                  |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| 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 select all and deselect all                                                                                              | —                           |
+| 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                  |
+| doLayout           | refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout                                       | —                           |
+| sort               | sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order                                                       | prop: string, order: string |
 
 ### Table Slots
-| Name | Description |
-|------|--------|
+
+| Name   | Description                                                                                                                                                                                   |
+| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | append | Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one. |
 
 ### Table-column Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon.  | string | selection / index / expand | — |
-| index | customize indices for each row, works on columns with `type=index` | number / function(index) | — | — |
-| label | column label | string | — | — |
-| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | — | — |
-| prop |  field name. You can also use its alias: `property` | string | — | — |
-| width | column width | string / number | — | — |
-| min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string / number | — | — |
-| fixed | whether column is fixed at left / right. Will be fixed at left if `true` | string / boolean | true / 'left' / 'right' | — |
-| render-header | render function for table header of this column | function({ column, $index }) | — | — |
-| sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean / string | true / false / 'custom' | false |
-| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | function(a, b) | — | — |
-| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | function(row, index) / string / array | — | — |
-| sort-orders | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | array | the elements in the array need to be one of the following: `ascending`, `descending` and `null` (restores to the original order) | ['ascending', 'descending', null] |
-| resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false |
-| formatter | function that formats cell content | function(row, column, cellValue, index) | — | — |
-| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |
-| align | alignment | string | left / center / right | left |
-| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | string | left / center / right | — |
-| class-name | class name of cells in the column | string | — | — |
-| label-class-name | class name of the label of this column | string | — | — |
-| selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | function(row, index) | — | — |
-| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work | boolean | — | false |
-| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | array[{ text, value }] | — | — |
-| filter-placement | placement for the filter dropdown | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | — |
-| filter-multiple | whether data filtering supports multiple options | boolean | — | true |
-| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | function(value, row, column) | — | — |
-| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | array | — | — |
+
+| Attribute             | Description                                                                                                                                                                                                         | Type                                    | Accepted Values                                                                                                                  | Default                           |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| type                  | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. | string                                  | selection / index / expand                                                                                                       | —                                 |
+| index                 | customize indices for each row, works on columns with `type=index`                                                                                                                                                  | number / function(index)                | —                                                                                                                                | —                                 |
+| label                 | column label                                                                                                                                                                                                        | string                                  | —                                                                                                                                | —                                 |
+| column-key            | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered                                                                                        | string                                  | —                                                                                                                                | —                                 |
+| prop                  | field name. You can also use its alias: `property`                                                                                                                                                                  | string                                  | —                                                                                                                                | —                                 |
+| width                 | column width                                                                                                                                                                                                        | string / number                         | —                                                                                                                                | —                                 |
+| min-width             | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion                                                                          | string / number                         | —                                                                                                                                | —                                 |
+| fixed                 | whether column is fixed at left / right. Will be fixed at left if `true`                                                                                                                                            | string / boolean                        | true / 'left' / 'right'                                                                                                          | —                                 |
+| render-header         | render function for table header of this column                                                                                                                                                                     | function({ column, \$index })           | —                                                                                                                                | —                                 |
+| sortable              | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table                                                                    | boolean / string                        | true / false / 'custom'                                                                                                          | false                             |
+| sort-method           | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort                                                                                                                       | function(a, b)                          | —                                                                                                                                | —                                 |
+| sort-by               | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal        | function(row, index) / string / array   | —                                                                                                                                | —                                 |
+| sort-orders           | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array     | array                                   | the elements in the array need to be one of the following: `ascending`, `descending` and `null` (restores to the original order) | ['ascending', 'descending', null] |
+| resizable             | whether column width can be resized, works when `border` of `el-table` is `true`                                                                                                                                    | boolean                                 | —                                                                                                                                | false                             |
+| formatter             | function that formats cell content                                                                                                                                                                                  | function(row, column, cellValue, index) | —                                                                                                                                | —                                 |
+| show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell                                                                                                                                  | boolean                                 | —                                                                                                                                | false                             |
+| align                 | alignment                                                                                                                                                                                                           | string                                  | left / center / right                                                                                                            | left                              |
+| header-align          | alignment of the table header. If omitted, the value of the above `align` attribute will be applied                                                                                                                 | string                                  | left / center / right                                                                                                            | —                                 |
+| class-name            | class name of cells in the column                                                                                                                                                                                   | string                                  | —                                                                                                                                | —                                 |
+| label-class-name      | class name of the label of this column                                                                                                                                                                              | string                                  | —                                                                                                                                | —                                 |
+| selectable            | function that determines if a certain row can be selected, works when `type` is 'selection'                                                                                                                         | function(row, index)                    | —                                                                                                                                | —                                 |
+| reserve-selection     | whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work                                                                              | boolean                                 | —                                                                                                                                | false                             |
+| filters               | an array of data filtering options. For each element in this array, `text` and `value` are required                                                                                                                 | array[{ text, value }]                  | —                                                                                                                                | —                                 |
+| filter-placement      | placement for the filter dropdown                                                                                                                                                                                   | string                                  | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end  | —                                 |
+| filter-multiple       | whether data filtering supports multiple options                                                                                                                                                                    | boolean                                 | —                                                                                                                                | true                              |
+| filter-method         | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true`                                                | function(value, row, column)            | —                                                                                                                                | —                                 |
+| filtered-value        | filter value for selected data, might be useful when table header is rendered with `render-header`                                                                                                                  | array                                   | —                                                                                                                                | —                                 |
 
 ### Table-column Slots
-| Name | Description |
-|------|--------|
-| — | Custom content for table columns. The scope parameter is { row, column, $index } |
-| header | Custom content for table header. The scope parameter is { column, $index } |
+
+| Name   | Description                                                                       |
+| ------ | --------------------------------------------------------------------------------- |
+| —      | Custom content for table columns. The scope parameter is { row, column, \$index } |
+| header | Custom content for table header. The scope parameter is { column, \$index }       |
diff --git a/website/docs/fr-FR/table.md b/website/docs/fr-FR/table.md
index 80e0fcfe90..0a1e0d7205 100644
--- a/website/docs/fr-FR/table.md
+++ b/website/docs/fr-FR/table.md
@@ -8,81 +8,12 @@ Un tableau de base pour afficher seulement.
 
 :::demo Après avoir configuré l'attribut `data` de `el-table` avec un tableau d'objets, vous pouvez utiliser `prop` (correspondant à une clé dans chaque objet du tableau `data`) dans `el-table-column` pour insérer des données dans les colonnes, ainsi que l'attribut `label` pour définir le nom de la colonne. L'attribut `width` définit si besoin la largeur de la colonne.
 
-```html
-  <template>
-    <el-table
-      :data="tableData"
-      style="width: 100%">
-      <el-table-column
-        prop="date"
-        label="Date"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="Nom"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="Adresse">
-      </el-table-column>
-    </el-table>
-  </template>
-
-  <script>
-    export default {
-      data() {
-        return {
-          tableData: [{
-            date: '2016-05-03',
-            name: 'Tom',
-            address: 'No. 189, Grove St, Los Angeles'
-          }, {
-            date: '2016-05-02',
-            name: 'Tom',
-            address: 'No. 189, Grove St, Los Angeles'
-          }, {
-            date: '2016-05-04',
-            name: 'Tom',
-            address: 'No. 189, Grove St, Los Angeles'
-          }, {
-            date: '2016-05-01',
-            name: 'Tom',
-            address: 'No. 189, Grove St, Los Angeles'
-          }]
-        }
-      }
-    }
-  </script>
-```
-:::
-
-### Table rayée
-
-Ajouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement.
-
-:::demo L'attribut `stripe` accepte un `Boolean`. Si `true`, le tableau sera rayé.
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    stripe
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Adresse">
-    </el-table-column>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Nom" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Adresse"> </el-table-column>
   </el-table>
 </template>
 
@@ -90,28 +21,83 @@ Ajouter des couleurs différentes pour les lignes paires et impaires permet de l
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
+:::
+
+### Table rayée
+
+Ajouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement.
+
+:::demo L'attribut `stripe` accepte un `Boolean`. Si `true`, le tableau sera rayé.
+
+```html
+<template>
+  <el-table :data="tableData" stripe style="width: 100%">
+    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Nom" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Adresse"> </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
+      }
+    },
+  }
+</script>
+```
+
 :::
 
 ### Table avec bordure
@@ -120,24 +106,10 @@ Ajouter des couleurs différentes pour les lignes paires et impaires permet de l
 
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    border
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Adresse">
-    </el-table-column>
+  <el-table :data="tableData" border style="width: 100%">
+    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Nom" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Adresse"> </el-table-column>
   </el-table>
 </template>
 
@@ -145,28 +117,34 @@ Ajouter des couleurs différentes pour les lignes paires et impaires permet de l
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Table avec statut
@@ -174,75 +152,71 @@ Ajouter des couleurs différentes pour les lignes paires et impaires permet de l
 Vous pouvez mettre en valeur certaines lignes du tableau suivant leur état, comme "success", "information", "warning", "danger" et d'autres.
 
 :::demo Utilisez `row-class-name` dans `el-table` pour utiliser une fonction qui permettra ajouter des classes à certaines lignes. Vous pouvez ensuite définir les classes en question dans votre CSS.
+
 ```html
 <template>
   <el-table
     :data="tableData"
     style="width: 100%"
-    :row-class-name="tableRowClassName">
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Adresse">
-    </el-table-column>
+    :row-class-name="tableRowClassName"
+  >
+    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Nom" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Adresse"> </el-table-column>
   </el-table>
 </template>
 
 <style>
   .el-table .warning-row {
-    background: oldlace;
+    --el-table-tr-background-color: var(--el-color-warning-lighter);
   }
-
   .el-table .success-row {
-    background: #f0f9eb;
+    --el-table-tr-background-color: var(--el-color-success-lighter);
   }
 </style>
 
 <script>
   export default {
     methods: {
-      tableRowClassName({row, rowIndex}) {
+      tableRowClassName({ row, rowIndex }) {
         if (rowIndex === 1) {
-          return 'warning-row';
+          return 'warning-row'
         } else if (rowIndex === 3) {
-          return 'success-row';
+          return 'success-row'
         }
-        return '';
-      }
+        return ''
+      },
     },
     data() {
       return {
-        tableData:  [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Table avec un header fixe
@@ -250,26 +224,13 @@ Vous pouvez mettre en valeur certaines lignes du tableau suivant leur état, com
 Lorsqu'il y a beaucoup de lignes, il peut être utile d'avoir un header fixe afin de ne pas perdre le nom de colonnes à mesure que l'utilisateur défile vers le bas.
 
 :::demo En réglant l'attribut `height` de `el-table`, vous pouvez fixer le header sans avoir besoin de plus de code.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    height="250"
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Adresse">
-    </el-table-column>
+  <el-table :data="tableData" height="250" style="width: 100%">
+    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Nom" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Adresse"> </el-table-column>
   </el-table>
 </template>
 
@@ -277,40 +238,49 @@ Lorsqu'il y a beaucoup de lignes, il peut être utile d'avoir un header fixe afi
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }],
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-08',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-06',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-07',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Table avec colonnes fixes
@@ -318,48 +288,23 @@ Lorsqu'il y a beaucoup de lignes, il peut être utile d'avoir un header fixe afi
 Lorsque qu'il y a beaucoup de colonnes, il peut être utile d'en fixer certaines afin de ne pas perdre de vue leurs informations à mesure que l'utilisateur défile sur les cotés.
 
 :::demo Utilisez l'attribut `fixed` de `el-table-column` qui accepte un `Boolean`. Si `true`, la colonne sera fixée à gauche. Il accepte aussi les valeurs 'left' et 'right', indiquant de quel coté la colonne doit être fixée.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
-    <el-table-column
-      fixed
-      prop="date"
-      label="Date"
-      width="150">
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column fixed prop="date" label="Date" width="150">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom"
-      width="120">
+    <el-table-column prop="name" label="Nom" width="120"> </el-table-column>
+    <el-table-column prop="state" label="État" width="120"> </el-table-column>
+    <el-table-column prop="city" label="Ville" width="120"> </el-table-column>
+    <el-table-column prop="address" label="Adresse" width="600">
     </el-table-column>
-    <el-table-column
-      prop="state"
-      label="État"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="city"
-      label="Ville"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Adresse"
-      width="600">
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="Zip"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      fixed="right"
-      label="Opérations"
-      width="120">
+    <el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
+    <el-table-column fixed="right" label="Opérations" width="120">
       <template #default="scope">
-        <el-button @click="handleClick" type="text" size="small">Detail</el-button>
+        <el-button @click="handleClick" type="text" size="small"
+          >Detail</el-button
+        >
         <el-button type="text" size="small">Editer</el-button>
       </template>
     </el-table-column>
@@ -370,49 +315,55 @@ Lorsque qu'il y a beaucoup de colonnes, il peut être utile d'en fixer certaines
   export default {
     methods: {
       handleClick() {
-        console.log('click');
-      }
+        console.log('click')
+      },
     },
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Home',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Office',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Home',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Office',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Table avec header et colonnes fixes
@@ -420,43 +371,18 @@ Lorsque qu'il y a beaucoup de colonnes, il peut être utile d'en fixer certaines
 Si vous avez un gros volume de données à afficher, vous pouvez fixer le header et des colonnes en même temps.
 
 :::demo Header et colonnes fixes combinant les deux exemples précédents.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%"
-    height="250">
-    <el-table-column
-      fixed
-      prop="date"
-      label="Date"
-      width="150">
+  <el-table :data="tableData" style="width: 100%" height="250">
+    <el-table-column fixed prop="date" label="Date" width="150">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="state"
-      label="État"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="city"
-      label="Ville"
-      width="320">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Adresse"
-      width="600">
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="Zip"
-      width="120">
+    <el-table-column prop="name" label="Nom" width="120"> </el-table-column>
+    <el-table-column prop="state" label="État" width="120"> </el-table-column>
+    <el-table-column prop="city" label="Ville" width="320"> </el-table-column>
+    <el-table-column prop="address" label="Adresse" width="600">
     </el-table-column>
+    <el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
   </el-table>
 </template>
 
@@ -464,61 +390,70 @@ Si vous avez un gros volume de données à afficher, vous pouvez fixer le header
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-08',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-06',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-07',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Hauteur fluide dans une Table avec header et colonnes fixes
@@ -526,52 +461,25 @@ Si vous avez un gros volume de données à afficher, vous pouvez fixer le header
 Quand les données changent dynamiquement, vous pouvez avoir besoin d'une hauteur maximale et d'afficher une barre de défilement si besoin.
 
 :::demo En utilisant l'attribut `max-height` de `el-table`, vous fixez le header. Le tableau ne défilera que si la hauteur des lignes dépasse cette hauteur maximale.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%"
-    max-height="250">
-    <el-table-column
-      fixed
-      prop="date"
-      label="Date"
-      width="150">
+  <el-table :data="tableData" style="width: 100%" max-height="250">
+    <el-table-column fixed prop="date" label="Date" width="150">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom"
-      width="120">
+    <el-table-column prop="name" label="Nom" width="120"> </el-table-column>
+    <el-table-column prop="state" label="État" width="120"> </el-table-column>
+    <el-table-column prop="city" label="Ville" width="120"> </el-table-column>
+    <el-table-column prop="address" label="Adresse" width="600">
     </el-table-column>
-    <el-table-column
-      prop="state"
-      label="État"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="city"
-      label="Ville"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Adresse"
-      width="600">
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="Zip"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      fixed="right"
-      label="Opérations"
-      width="120">
+    <el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
+    <el-table-column fixed="right" label="Opérations" width="120">
       <template #default="scope">
         <el-button
           @click.prevent="deleteRow(scope.$index, tableData)"
           type="text"
-          size="small">
+          size="small"
+        >
           Supprimer
         </el-button>
       </template>
@@ -583,66 +491,75 @@ Quand les données changent dynamiquement, vous pouvez avoir besoin d'une hauteu
   export default {
     methods: {
       deleteRow(index, rows) {
-        rows.splice(index, 1);
-      }
+        rows.splice(index, 1)
+      },
     },
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-08',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-06',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-07',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Grouper les headers
@@ -650,42 +567,20 @@ Quand les données changent dynamiquement, vous pouvez avoir besoin d'une hauteu
 Quand la structure du tableau est complexe, vous pouvez grouper les headers afin de montrer une hiérarchie.
 
 :::demo Placez simplement `el-table-column` dans une autre `el-table-column`, et vous grouperez ainsi les headers.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="150">
-    </el-table-column>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="date" label="Date" width="150"> </el-table-column>
     <el-table-column label="Informations de livraison">
-      <el-table-column
-        prop="name"
-        label="Nom"
-        width="120">
-      </el-table-column>
+      <el-table-column prop="name" label="Nom" width="120"> </el-table-column>
       <el-table-column label="Informations d'adresse">
-        <el-table-column
-          prop="state"
-          label="État"
-          width="120">
+        <el-table-column prop="state" label="État" width="120">
         </el-table-column>
-        <el-table-column
-          prop="city"
-          label="Ville"
-          width="120">
-        </el-table-column>
-        <el-table-column
-          prop="address"
-          label="Adresse">
-        </el-table-column>
-        <el-table-column
-          prop="zip"
-          label="Zip"
-          width="120">
+        <el-table-column prop="city" label="Ville" width="120">
         </el-table-column>
+        <el-table-column prop="address" label="Adresse"> </el-table-column>
+        <el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
       </el-table-column>
     </el-table-column>
   </el-table>
@@ -695,61 +590,70 @@ Quand la structure du tableau est complexe, vous pouvez grouper les headers afin
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-08',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-06',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-07',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Sélecteur simple
@@ -757,6 +661,7 @@ Quand la structure du tableau est complexe, vous pouvez grouper les headers afin
 Vous pouvez activer la sélection d'une ligne.
 
 :::demo Activez la sélection en ajoutant l'attribut `highlight-current-row`. L'évènement `current-change` se déclenchera à chaque changement de sélection, ses paramètres étant les deux lignes avant et après le changement: `currentRow` et `oldCurrentRow`. Si vous avez besoin d'afficher l'index des lignes, ajoutez une `el-table-column` avec pour `type` la valeur `index`, qui commencera à 1.
+
 ```html
 <template>
   <el-table
@@ -764,28 +669,18 @@ Vous pouvez activer la sélection d'une ligne.
     :data="tableData"
     highlight-current-row
     @current-change="handleCurrentChange"
-    style="width: 100%">
-    <el-table-column
-      type="index"
-      width="50">
-    </el-table-column>
-    <el-table-column
-      property="date"
-      label="Date"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      property="name"
-      label="Nom"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      property="address"
-      label="Adresse">
+    style="width: 100%"
+  >
+    <el-table-column type="index" width="50"> </el-table-column>
+    <el-table-column property="date" label="Date" width="120">
     </el-table-column>
+    <el-table-column property="name" label="Nom" width="120"> </el-table-column>
+    <el-table-column property="address" label="Adresse"> </el-table-column>
   </el-table>
   <div style="margin-top: 20px">
-    <el-button @click="setCurrent(tableData[1])">Sélectionner la deuxième ligne</el-button>
+    <el-button @click="setCurrent(tableData[1])"
+      >Sélectionner la deuxième ligne</el-button
+    >
     <el-button @click="setCurrent()">Effacer la sélection</el-button>
   </div>
 </template>
@@ -794,38 +689,44 @@ Vous pouvez activer la sélection d'une ligne.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }],
-        currentRow: null
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
+        currentRow: null,
       }
     },
 
     methods: {
       setCurrent(row) {
-        this.$refs.singleTable.setCurrentRow(row);
+        this.$refs.singleTable.setCurrentRow(row)
       },
       handleCurrentChange(val) {
-        this.currentRow = val;
-      }
-    }
+        this.currentRow = val
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### Sélection multiple
@@ -833,35 +734,27 @@ Vous pouvez activer la sélection d'une ligne.
 Vous pouvez aussi sélectionner plusieurs lignes.
 
 :::demo Ajoutez une `el-table-column` avec son `type` à `selection`. Cet exemple utilise aussi `show-overflow-tooltip`: par défaut, si le contenu est trop long, il se séparera en plusieurs lignes. Si vous souhaitez conserver une seule ligne, utilisez `show-overflow-tooltip`, qui accepte un `Boolean`. Si `true`, le contenu non affiché s'affichera dans le tooltip lorsque la souris passera sur la case.
+
 ```html
 <template>
   <el-table
     ref="multipleTable"
     :data="tableData"
     style="width: 100%"
-    @selection-change="handleSelectionChange">
-    <el-table-column
-      type="selection"
-      width="55">
-    </el-table-column>
-    <el-table-column
-      label="Date"
-      width="120">
+    @selection-change="handleSelectionChange"
+  >
+    <el-table-column type="selection" width="55"> </el-table-column>
+    <el-table-column label="Date" width="120">
       <template #default="scope">{{ scope.row.date }}</template>
     </el-table-column>
-    <el-table-column
-      property="name"
-      label="Nom"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      property="address"
-      label="Adresse"
-      show-overflow-tooltip>
+    <el-table-column property="name" label="Nom" width="120"> </el-table-column>
+    <el-table-column property="address" label="Adresse" show-overflow-tooltip>
     </el-table-column>
   </el-table>
   <div style="margin-top: 20px">
-    <el-button @click="toggleSelection([tableData[1], tableData[2]])">Sélectionner les deuxième et troisième lignes</el-button>
+    <el-button @click="toggleSelection([tableData[1], tableData[2]])"
+      >Sélectionner les deuxième et troisième lignes</el-button
+    >
     <el-button @click="toggleSelection()">Effacer la sélection</el-button>
   </div>
 </template>
@@ -870,36 +763,44 @@ Vous pouvez aussi sélectionner plusieurs lignes.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }],
-        multipleSelection: []
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-08',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-06',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-07',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
+        multipleSelection: [],
       }
     },
 
@@ -907,19 +808,20 @@ Vous pouvez aussi sélectionner plusieurs lignes.
       toggleSelection(rows) {
         if (rows) {
           rows.forEach(row => {
-            this.$refs.multipleTable.toggleRowSelection(row);
-          });
+            this.$refs.multipleTable.toggleRowSelection(row)
+          })
         } else {
-          this.$refs.multipleTable.clearSelection();
+          this.$refs.multipleTable.clearSelection()
         }
       },
       handleSelectionChange(val) {
-        this.multipleSelection = val;
-      }
-    }
+        this.multipleSelection = val
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### Trier
@@ -927,27 +829,18 @@ Vous pouvez aussi sélectionner plusieurs lignes.
 Il est possible de trier les données afin de trouver plus facilement ce qu'on cherche.
 
 :::demo Ajoutez l'attribut `sortable` a une colonne pour pouvoir trier cette colonne. Il accepte un `Boolean` et à `false` par défaut. Ajoutez `default-sort` pour déterminer les propriétés par défaut du tri. Pour appliquer vos propres règles, utilisez `sort-method` ou `sort-by`. Si vous avez besoin d'un tri dynamique depuis le serveur, mettez `sortable` à `custom`, et écoutez l'évènement `sort-change` de `Table`. Depuis cet évènement, vous aurez accès à la colonne et l'ordre de tri. cet exemple utilise aussi `formatter` pour formater les valeurs de colonnes. Il prend une fonction avec deux paramètres: `row` et `column`. Vous pouvez ainsi transformer les valeurs.
+
 ```html
 <template>
   <el-table
     :data="tableData"
-    :default-sort = "{prop: 'date', order: 'descending'}"
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="Date"
-      sortable
-      width="180">
+    :default-sort="{prop: 'date', order: 'descending'}"
+    style="width: 100%"
+  >
+    <el-table-column prop="date" label="Date" sortable width="180">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Adresse"
-      :formatter="formatter">
+    <el-table-column prop="name" label="Nom" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Adresse" :formatter="formatter">
     </el-table-column>
   </el-table>
 </template>
@@ -956,33 +849,39 @@ Il est possible de trier les données afin de trouver plus facilement ce qu'on c
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
       }
     },
     methods: {
       formatter(row, column) {
-        return row.address;
-      }
-    }
+        return row.address
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### Filtrer
@@ -990,6 +889,7 @@ Il est possible de trier les données afin de trouver plus facilement ce qu'on c
 Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.
 
 :::demo Réglez `filters` et `filter-method` dans `el-table-column` pour rendre la colonne filtrable. `filters` prends un tableau, et `filter-method` est une fonction déterminant comment les lignes s'affichent. Elle prend trois paramètres: `value`, `row` et `column`.
+
 ```html
 <template>
   <el-button @click="resetDateFilter">Effacer le filtre date</el-button>
@@ -998,7 +898,8 @@ Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.
     row-key="date"
     ref="filterTable"
     :data="tableData"
-    style="width: 100%">
+    style="width: 100%"
+  >
     <el-table-column
       prop="date"
       label="Date"
@@ -1009,15 +910,8 @@ Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.
       :filter-method="filterHandler"
     >
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Adresse"
-      :formatter="formatter">
+    <el-table-column prop="name" label="Nom" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Adresse" :formatter="formatter">
     </el-table-column>
     <el-table-column
       prop="tag"
@@ -1025,11 +919,14 @@ Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.
       width="100"
       :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
       :filter-method="filterTag"
-      filter-placement="bottom-end">
+      filter-placement="bottom-end"
+    >
       <template #default="scope">
         <el-tag
           :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
-          disable-transitions>{{scope.row.tag}}</el-tag>
+          disable-transitions
+          >{{scope.row.tag}}</el-tag
+        >
       </template>
     </el-table-column>
   </el-table>
@@ -1039,50 +936,56 @@ Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-          tag: 'Home'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-          tag: 'Office'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-          tag: 'Home'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles',
-          tag: 'Office'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+            tag: 'Home',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+            tag: 'Office',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+            tag: 'Home',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+            tag: 'Office',
+          },
+        ],
       }
     },
     methods: {
       resetDateFilter() {
-        this.$refs.filterTable.clearFilter('date');
+        this.$refs.filterTable.clearFilter('date')
       },
       clearFilter() {
-        this.$refs.filterTable.clearFilter();
+        this.$refs.filterTable.clearFilter()
       },
       formatter(row, column) {
-        return row.address;
+        return row.address
       },
       filterTag(value, row) {
-        return row.tag === value;
+        return row.tag === value
       },
       filterHandler(value, row, column) {
-        const property = column['property'];
-        return row[property] === value;
-      }
-    }
+        const property = column['property']
+        return row[property] === value
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### Template de colonne personnalisé
@@ -1090,22 +993,17 @@ Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.
 Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres composants.
 
 :::demo Vous avez acccès aux données suivantes: `row`, `column`, `$index` et `store` (gestionnaire d'état de Table) grâce aux [slot](https://v3.vuejs.org/guide/component-slots.html).
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
-    <el-table-column
-      label="Date"
-      width="180">
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column label="Date" width="180">
       <template #default="scope">
         <i class="el-icon-time"></i>
         <span style="margin-left: 10px">{{ scope.row.date }}</span>
       </template>
     </el-table-column>
-    <el-table-column
-      label="Nom"
-      width="180">
+    <el-table-column label="Nom" width="180">
       <template #default="scope">
         <el-popover effect="light" trigger="hover" placement="top">
           <template #default>
@@ -1120,16 +1018,17 @@ Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres
         </el-popover>
       </template>
     </el-table-column>
-    <el-table-column
-      label="Opérations">
+    <el-table-column label="Opérations">
       <template #default="scope">
-        <el-button
-          size="mini"
-          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>
+        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
+          >Editer</el-button
+        >
         <el-button
           size="mini"
           type="danger"
-          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>
+          @click="handleDelete(scope.$index, scope.row)"
+          >Supprimer</el-button
+        >
       </template>
     </el-table-column>
   </el-table>
@@ -1139,36 +1038,42 @@ Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
       }
     },
     methods: {
       handleEdit(index, row) {
-        console.log(index, row);
+        console.log(index, row)
       },
       handleDelete(index, row) {
-        console.log(index, row);
-      }
-    }
+        console.log(index, row)
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### Table avec header personnalisé
@@ -1176,35 +1081,29 @@ Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres
 Vous pouvez également personnaliser le header de la table.
 
 :::demo Vous pouvez personnaliser le header grâce aux [slots](https://v3.vuejs.org/guide/component-slots.html).
+
 ```html
 <template>
   <el-table
     :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
-    style="width: 100%">
-    <el-table-column
-      label="Date"
-      prop="date">
-    </el-table-column>
-    <el-table-column
-      label="Name"
-      prop="name">
-    </el-table-column>
-    <el-table-column
-      align="right">
+    style="width: 100%"
+  >
+    <el-table-column label="Date" prop="date"> </el-table-column>
+    <el-table-column label="Name" prop="name"> </el-table-column>
+    <el-table-column align="right">
       <template #header>
-        <el-input
-          v-model="search"
-          size="mini"
-          placeholder="Type to search"/>
+        <el-input v-model="search" size="mini" placeholder="Type to search" />
       </template>
       <template #default="scope">
-        <el-button
-          size="mini"
-          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>
+        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
+          >Editer</el-button
+        >
         <el-button
           size="mini"
           type="danger"
-          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>
+          @click="handleDelete(scope.$index, scope.row)"
+          >Supprimer</el-button
+        >
       </template>
     </el-table-column>
   </el-table>
@@ -1214,37 +1113,43 @@ Vous pouvez également personnaliser le header de la table.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-02',
-          name: 'John',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-04',
-          name: 'Morgan',
-          address: 'No. 189, Grove St, Los Angeles'
-        }, {
-          date: '2016-05-01',
-          name: 'Jessy',
-          address: 'No. 189, Grove St, Los Angeles'
-        }],
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-02',
+            name: 'John',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Morgan',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Jessy',
+            address: 'No. 189, Grove St, Los Angeles',
+          },
+        ],
         search: '',
       }
     },
     methods: {
       handleEdit(index, row) {
-        console.log(index, row);
+        console.log(index, row)
       },
       handleDelete(index, row) {
-        console.log(index, row);
-      }
+        console.log(index, row)
+      },
     },
   }
 </script>
 ```
+
 :::
 
 ### Ligne extensible
@@ -1252,11 +1157,10 @@ Vous pouvez également personnaliser le header de la table.
 Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas afficher de scrollbar, vous pouvez utiliser une ligne extensible.
 
 :::demo Activer la ligne extensible en mettant `type` à `expand` et en utilisant un slot. Le contenu de `el-table-column` sera généré quand l'extension aura lieu, et vous avez aux même attributs que pour le slot des templates de colonnes.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
+  <el-table :data="tableData" style="width: 100%">
     <el-table-column type="expand">
       <template #default="props">
         <p>État: {{ props.row.state }}</p>
@@ -1265,14 +1169,8 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
         <p>Zip: {{ props.row.zip }}</p>
       </template>
     </el-table-column>
-    <el-table-column
-      label="Date"
-      prop="date">
-    </el-table-column>
-    <el-table-column
-      label="Nom"
-      prop="name">
-    </el-table-column>
+    <el-table-column label="Date" prop="date"> </el-table-column>
+    <el-table-column label="Nom" prop="name"> </el-table-column>
   </el-table>
 </template>
 
@@ -1280,61 +1178,70 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-08',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-06',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }, {
-          date: '2016-05-07',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-08',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-06',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+          {
+            date: '2016-05-07',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### Arborescence et lazy loading
@@ -1343,96 +1250,95 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
 
 ```html
 <template>
-<div>
-  <el-table
-    :data="tableData"
-    style="width: 100%;margin-bottom: 20px;"
-    row-key="id"
-    border
-    default-expand-all>
-    <el-table-column
-      prop="date"
-      label="date"
-      sortable
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom"
-      sortable
-      width="180">
-    </el-table-column>
-  </el-table>
+  <div>
+    <el-table
+      :data="tableData"
+      style="width: 100%;margin-bottom: 20px;"
+      row-key="id"
+      border
+      default-expand-all
+    >
+      <el-table-column prop="date" label="date" sortable width="180">
+      </el-table-column>
+      <el-table-column prop="name" label="Nom" sortable width="180">
+      </el-table-column>
+    </el-table>
 
-  <el-table
-    :data="tableData1"
-    style="width: 100%"
-    row-key="id"
-    border
-    lazy
-    :load="load"
-    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom"
-      width="180">
-    </el-table-column>
-  </el-table>
-</div>
+    <el-table
+      :data="tableData1"
+      style="width: 100%"
+      row-key="id"
+      border
+      lazy
+      :load="load"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+      <el-table-column prop="name" label="Nom" width="180"> </el-table-column>
+    </el-table>
+  </div>
 </template>
 <script>
   export default {
     data() {
       return {
-        tableData: [{
-          id: 1,
-          date: '2016-05-02',
-          name: 'wangxiaohu'
-        }, {
-          id: 2,
-          date: '2016-05-04',
-          name: 'wangxiaohu'
-        }, {
-          id: 3,
-          date: '2016-05-01',
-          name: 'wangxiaohu',
-          children: [{
-              id: 31,
-              date: '2016-05-01',
-              name: 'wangxiaohu'
-            }, {
-              id: 32,
-              date: '2016-05-01',
-              name: 'wangxiaohu'
-          }]
-        }, {
-          id: 4,
-          date: '2016-05-03',
-          name: 'wangxiaohu'
-        }],
-        tableData1: [{
-          id: 1,
-          date: '2016-05-02',
-          name: 'wangxiaohu'
-        }, {
-          id: 2,
-          date: '2016-05-04',
-          name: 'wangxiaohu'
-        }, {
-          id: 3,
-          date: '2016-05-01',
-          name: 'wangxiaohu',
-          hasChildren: true
-        }, {
-          id: 4,
-          date: '2016-05-03',
-          name: 'wangxiaohu'
-        }]
+        tableData: [
+          {
+            id: 1,
+            date: '2016-05-02',
+            name: 'wangxiaohu',
+          },
+          {
+            id: 2,
+            date: '2016-05-04',
+            name: 'wangxiaohu',
+          },
+          {
+            id: 3,
+            date: '2016-05-01',
+            name: 'wangxiaohu',
+            children: [
+              {
+                id: 31,
+                date: '2016-05-01',
+                name: 'wangxiaohu',
+              },
+              {
+                id: 32,
+                date: '2016-05-01',
+                name: 'wangxiaohu',
+              },
+            ],
+          },
+          {
+            id: 4,
+            date: '2016-05-03',
+            name: 'wangxiaohu',
+          },
+        ],
+        tableData1: [
+          {
+            id: 1,
+            date: '2016-05-02',
+            name: 'wangxiaohu',
+          },
+          {
+            id: 2,
+            date: '2016-05-04',
+            name: 'wangxiaohu',
+          },
+          {
+            id: 3,
+            date: '2016-05-01',
+            name: 'wangxiaohu',
+            hasChildren: true,
+          },
+          {
+            id: 4,
+            date: '2016-05-03',
+            name: 'wangxiaohu',
+          },
+        ],
       }
     },
     methods: {
@@ -1442,19 +1348,21 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
             {
               id: 31,
               date: '2016-05-01',
-              name: 'wangxiaohu'
-            }, {
+              name: 'wangxiaohu',
+            },
+            {
               id: 32,
               date: '2016-05-01',
-              name: 'wangxiaohu'
-            }
+              name: 'wangxiaohu',
+            },
           ])
         }, 1000)
-      }
+      },
     },
   }
 </script>
 ```
+
 :::
 
 ### Ligne de somme
@@ -1462,36 +1370,17 @@ Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas affich
 Pour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour afficher la somme de chaque colonne.
 
 :::demo Mettez l'attribut `show-summary` à `true` dans `el-table`. Par défaut, la première colonne n'affiche que 'Sum' (vous pouvez configurer ce label avec `sum-text`), alors que les autres affichent la somme de chaque colonne. Vous pouvez choisir comment effectuer l'opération grâce à `summary-method`, qui doit retourner un tableau, cahque élément correspondant à la somme de chaque colonne. La deuxième table de cet exemple montre tout cela en pratique.
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    border
-    show-summary
-    style="width: 100%">
-    <el-table-column
-      prop="id"
-      label="ID"
-      width="180">
+  <el-table :data="tableData" border show-summary style="width: 100%">
+    <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Nom"> </el-table-column>
+    <el-table-column prop="amount1" sortable label="Quantité 1">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom">
+    <el-table-column prop="amount2" sortable label="Quantité 2">
     </el-table-column>
-    <el-table-column
-      prop="amount1"
-      sortable
-      label="Quantité 1">
-    </el-table-column>
-    <el-table-column
-      prop="amount2"
-      sortable
-      label="Quantité 2">
-    </el-table-column>
-    <el-table-column
-      prop="amount3"
-      sortable
-      label="Quantité 3">
+    <el-table-column prop="amount3" sortable label="Quantité 3">
     </el-table-column>
   </el-table>
 
@@ -1501,28 +1390,13 @@ Pour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour affiche
     height="200"
     :summary-method="getSummaries"
     show-summary
-    style="width: 100%; margin-top: 20px">
-    <el-table-column
-      prop="id"
-      label="ID"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom">
-    </el-table-column>
-    <el-table-column
-      prop="amount1"
-      label="Coût 1 ($)">
-    </el-table-column>
-    <el-table-column
-      prop="amount2"
-      label="Coût 2 ($)">
-    </el-table-column>
-    <el-table-column
-      prop="amount3"
-      label="Coût 3 ($)">
-    </el-table-column>
+    style="width: 100%; margin-top: 20px"
+  >
+    <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Nom"> </el-table-column>
+    <el-table-column prop="amount1" label="Coût 1 ($)"> </el-table-column>
+    <el-table-column prop="amount2" label="Coût 2 ($)"> </el-table-column>
+    <el-table-column prop="amount3" label="Coût 3 ($)"> </el-table-column>
   </el-table>
 </template>
 
@@ -1530,69 +1404,78 @@ Pour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour affiche
   export default {
     data() {
       return {
-        tableData: [{
-          id: '12987122',
-          name: 'Tom',
-          amount1: '234',
-          amount2: '3.2',
-          amount3: 10
-        }, {
-          id: '12987123',
-          name: 'Tom',
-          amount1: '165',
-          amount2: '4.43',
-          amount3: 12
-        }, {
-          id: '12987124',
-          name: 'Tom',
-          amount1: '324',
-          amount2: '1.9',
-          amount3: 9
-        }, {
-          id: '12987125',
-          name: 'Tom',
-          amount1: '621',
-          amount2: '2.2',
-          amount3: 17
-        }, {
-          id: '12987126',
-          name: 'Tom',
-          amount1: '539',
-          amount2: '4.1',
-          amount3: 15
-        }]
-      };
+        tableData: [
+          {
+            id: '12987122',
+            name: 'Tom',
+            amount1: '234',
+            amount2: '3.2',
+            amount3: 10,
+          },
+          {
+            id: '12987123',
+            name: 'Tom',
+            amount1: '165',
+            amount2: '4.43',
+            amount3: 12,
+          },
+          {
+            id: '12987124',
+            name: 'Tom',
+            amount1: '324',
+            amount2: '1.9',
+            amount3: 9,
+          },
+          {
+            id: '12987125',
+            name: 'Tom',
+            amount1: '621',
+            amount2: '2.2',
+            amount3: 17,
+          },
+          {
+            id: '12987126',
+            name: 'Tom',
+            amount1: '539',
+            amount2: '4.1',
+            amount3: 15,
+          },
+        ],
+      }
     },
     methods: {
       getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
+        const { columns, data } = param
+        const sums = []
         columns.forEach((column, index) => {
           if (index === 0) {
-            sums[index] = 'Coût total';
-            return;
+            sums[index] = 'Coût total'
+            return
           }
-          const values = data.map(item => Number(item[column.property]));
+          const values = data.map(item => Number(item[column.property]))
           if (!values.every(value => isNaN(value))) {
-            sums[index] = '$ ' + values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
-              }
-            }, 0);
+            sums[index] =
+              '$ ' +
+              values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return prev + curr
+                } else {
+                  return prev
+                }
+              }, 0)
           } else {
-            sums[index] = 'N/A';
+            sums[index] = 'N/A'
           }
-        });
+        })
 
-        return sums;
-      }
-    }
-  };
+        return sums
+      },
+    },
+  }
 </script>
 ```
+
 :::
 
 ### Étendue des lignes et colonnes
@@ -1608,30 +1491,15 @@ Vous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des c
       :data="tableData"
       :span-method="arraySpanMethod"
       border
-      style="width: 100%">
-      <el-table-column
-        prop="id"
-        label="ID"
-        width="180">
+      style="width: 100%"
+    >
+      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+      <el-table-column prop="name" label="Nom"> </el-table-column>
+      <el-table-column prop="amount1" sortable label="Quantité 1">
       </el-table-column>
-      <el-table-column
-        prop="name"
-        label="Nom">
+      <el-table-column prop="amount2" sortable label="Quantité 2">
       </el-table-column>
-      <el-table-column
-        prop="amount1"
-        sortable
-        label="Quantité 1">
-      </el-table-column>
-      <el-table-column
-        prop="amount2"
-        sortable
-        label="Quantité 2">
-      </el-table-column>
-      <el-table-column
-        prop="amount3"
-        sortable
-        label="Quantité 3">
+      <el-table-column prop="amount3" sortable label="Quantité 3">
       </el-table-column>
     </el-table>
 
@@ -1639,28 +1507,13 @@ Vous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des c
       :data="tableData"
       :span-method="objectSpanMethod"
       border
-      style="width: 100%; margin-top: 20px">
-      <el-table-column
-        prop="id"
-        label="ID"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="Nom">
-      </el-table-column>
-      <el-table-column
-        prop="amount1"
-        label="Quantité 1">
-      </el-table-column>
-      <el-table-column
-        prop="amount2"
-        label="Quantité 2">
-      </el-table-column>
-      <el-table-column
-        prop="amount3"
-        label="Quantité 3">
-      </el-table-column>
+      style="width: 100%; margin-top: 20px"
+    >
+      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+      <el-table-column prop="name" label="Nom"> </el-table-column>
+      <el-table-column prop="amount1" label="Quantité 1"> </el-table-column>
+      <el-table-column prop="amount2" label="Quantité 2"> </el-table-column>
+      <el-table-column prop="amount3" label="Quantité 3"> </el-table-column>
     </el-table>
   </div>
 </template>
@@ -1669,46 +1522,52 @@ Vous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des c
   export default {
     data() {
       return {
-        tableData: [{
-          id: '12987122',
-          name: 'Tom',
-          amount1: '234',
-          amount2: '3.2',
-          amount3: 10
-        }, {
-          id: '12987123',
-          name: 'Tom',
-          amount1: '165',
-          amount2: '4.43',
-          amount3: 12
-        }, {
-          id: '12987124',
-          name: 'Tom',
-          amount1: '324',
-          amount2: '1.9',
-          amount3: 9
-        }, {
-          id: '12987125',
-          name: 'Tom',
-          amount1: '621',
-          amount2: '2.2',
-          amount3: 17
-        }, {
-          id: '12987126',
-          name: 'Tom',
-          amount1: '539',
-          amount2: '4.1',
-          amount3: 15
-        }]
-      };
+        tableData: [
+          {
+            id: '12987122',
+            name: 'Tom',
+            amount1: '234',
+            amount2: '3.2',
+            amount3: 10,
+          },
+          {
+            id: '12987123',
+            name: 'Tom',
+            amount1: '165',
+            amount2: '4.43',
+            amount3: 12,
+          },
+          {
+            id: '12987124',
+            name: 'Tom',
+            amount1: '324',
+            amount2: '1.9',
+            amount3: 9,
+          },
+          {
+            id: '12987125',
+            name: 'Tom',
+            amount1: '621',
+            amount2: '2.2',
+            amount3: 17,
+          },
+          {
+            id: '12987126',
+            name: 'Tom',
+            amount1: '539',
+            amount2: '4.1',
+            amount3: 15,
+          },
+        ],
+      }
     },
     methods: {
       arraySpanMethod({ row, column, rowIndex, columnIndex }) {
         if (rowIndex % 2 === 0) {
           if (columnIndex === 0) {
-            return [1, 2];
+            return [1, 2]
           } else if (columnIndex === 1) {
-            return [0, 0];
+            return [0, 0]
           }
         }
       },
@@ -1718,20 +1577,21 @@ Vous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des c
           if (rowIndex % 2 === 0) {
             return {
               rowspan: 2,
-              colspan: 1
-            };
+              colspan: 1,
+            }
           } else {
             return {
               rowspan: 0,
-              colspan: 0
-            };
+              colspan: 0,
+            }
           }
         }
-      }
-    }
-  };
+      },
+    },
+  }
 </script>
 ```
+
 :::
 
 ### Indices personnalisés
@@ -1742,27 +1602,11 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
 
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
-    <el-table-column
-      type="index"
-      :index="indexMethod">
-    </el-table-column>
-    <el-table-column
-      prop="date"
-      label="Date"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="Nom"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="Adresse">
-    </el-table-column>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column type="index" :index="indexMethod"> </el-table-column>
+    <el-table-column prop="date" label="Date" width="180"> </el-table-column>
+    <el-table-column prop="name" label="Nom" width="180"> </el-table-column>
+    <el-table-column prop="address" label="Adresse"> </el-table-column>
   </el-table>
 </template>
 
@@ -1770,167 +1614,173 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-02',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }, {
-          date: '2016-05-04',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Home'
-        }, {
-          date: '2016-05-01',
-          name: 'Tom',
-          state: 'California',
-          city: 'Los Angeles',
-          address: 'No. 189, Grove St, Los Angeles',
-          zip: 'CA 90036',
-          tag: 'Office'
-        }],
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Home',
+          },
+          {
+            date: '2016-05-02',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Office',
+          },
+          {
+            date: '2016-05-04',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Home',
+          },
+          {
+            date: '2016-05-01',
+            name: 'Tom',
+            state: 'California',
+            city: 'Los Angeles',
+            address: 'No. 189, Grove St, Los Angeles',
+            zip: 'CA 90036',
+            tag: 'Office',
+          },
+        ],
       }
     },
     methods: {
       indexMethod(index) {
-        return index * 2;
-      }
-    }
-  };
+        return index * 2
+      },
+    },
+  }
 </script>
 ```
+
 :::
 
 ### Attributs de Table
 
-| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
-|----------------|----------------------|-----------|-----------------------|----------|
-| data | Les données de la table. | array | — | — |
-| height | La hauteur de la table. Par défaut la hauteur est `auto`. Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes. | string / number | — | — |
-| max-height | Table's max-height. The legal value is a number or the height in px. | string / number | — | — |
-| stripe | Si la table est rayée. | boolean | — | false |
-| border | Si la table à une bordure verticale. | boolean | — | false |
-| size | Taille de la table. | string | medium / small / mini | — |
-| fit | Si la largeur des colonnes s'adapte au conteneur. | boolean | — | true |
-| show-header | Si le header de la table est visible. | boolean | — | true |
-| highlight-current-row | Si la ligne courante est mise en valeur. | boolean | — | false |
-| current-row-key | Clé de la ligne actuelle. Propriété set-only. | string / number | — | — |
-| row-class-name | Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne. | function({ row, rowIndex }) / string | — | — |
-| row-style | Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne. | function({ row, rowIndex }) / object | — | — |
-| cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule. | function({ row, column, rowIndex, columnIndex }) / string | — | — |
-| cell-style | Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule. | function({ row, column, rowIndex, columnIndex }) / object | — | — |
-| header-row-class-name | Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header. | function({ row, rowIndex }) / string | — | — |
-| header-row-style | Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header. | function({ row, rowIndex }) / object | — | — |
-| header-cell-class-name | Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header. | function({ row, column, rowIndex, columnIndex }) / string | — | — |
-| 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 à `#empty`. | string | — | No Data |
-| 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 |
-| show-summary | Si une ligne de somme doit apparaître. | boolean | — | false |
-| sum-text | Le label de la première cellule de la ligne de somme. | string | — | Sum |
-| 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                  | 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' } |
+| Attribut                | Description                                                                                                                                                                                                                                                                              | Type                                                      | Valeurs acceptées               | Défaut                                               |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------------------------- | ---------------------------------------------------- |
+| data                    | Les données de la table.                                                                                                                                                                                                                                                                 | array                                                     | —                               | —                                                    |
+| height                  | La hauteur de la table. Par défaut la hauteur est `auto`. Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes.                                                     | string / number                                           | —                               | —                                                    |
+| max-height              | Table's max-height. The legal value is a number or the height in px.                                                                                                                                                                                                                     | string / number                                           | —                               | —                                                    |
+| stripe                  | Si la table est rayée.                                                                                                                                                                                                                                                                   | boolean                                                   | —                               | false                                                |
+| border                  | Si la table à une bordure verticale.                                                                                                                                                                                                                                                     | boolean                                                   | —                               | false                                                |
+| size                    | Taille de la table.                                                                                                                                                                                                                                                                      | string                                                    | medium / small / mini           | —                                                    |
+| fit                     | Si la largeur des colonnes s'adapte au conteneur.                                                                                                                                                                                                                                        | boolean                                                   | —                               | true                                                 |
+| show-header             | Si le header de la table est visible.                                                                                                                                                                                                                                                    | boolean                                                   | —                               | true                                                 |
+| highlight-current-row   | Si la ligne courante est mise en valeur.                                                                                                                                                                                                                                                 | boolean                                                   | —                               | false                                                |
+| current-row-key         | Clé de la ligne actuelle. Propriété set-only.                                                                                                                                                                                                                                            | string / number                                           | —                               | —                                                    |
+| row-class-name          | Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne.                                                                                                                                           | function({ row, rowIndex }) / string                      | —                               | —                                                    |
+| row-style               | Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne.                                                                                                                                                                            | function({ row, rowIndex }) / object                      | —                               | —                                                    |
+| cell-class-name         | Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule.                                                                                                                                       | function({ row, column, rowIndex, columnIndex }) / string | —                               | —                                                    |
+| cell-style              | Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule.                                                                                                                                                                        | function({ row, column, rowIndex, columnIndex }) / object | —                               | —                                                    |
+| header-row-class-name   | Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header.                                                                                                                       | function({ row, rowIndex }) / string                      | —                               | —                                                    |
+| header-row-style        | Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header.                                                                                                                                                        | function({ row, rowIndex }) / object                      | —                               | —                                                    |
+| header-cell-class-name  | Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header.                                                                                                                   | function({ row, column, rowIndex, columnIndex }) / string | —                               | —                                                    |
+| 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 à `#empty`.                                                                                                                                                                                         | string                                                    | —                               | No Data                                              |
+| 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                                                 |
+| show-summary            | Si une ligne de somme doit apparaître.                                                                                                                                                                                                                                                   | boolean                                                   | —                               | false                                                |
+| sum-text                | Le label de la première cellule de la ligne de somme.                                                                                                                                                                                                                                    | string                                                    | —                               | Sum                                                  |
+| 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                  | 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
 
-| Nom | Description | Paramètres |
-| ---- | ---- | ---- |
-| select | Se déclenche quand l'utilisateur clique sur la checkbox d'une ligne. | selection, row |
-| select-all | Se déclenche quand l'utilisateur clique sur la checkbox du header. | selection |
-| selection-change | Se déclenche quand la selection change. | selection |
-| cell-mouse-enter | Se déclenche quand la souris passe sur une cellule. | row, column, cell, event |
-| cell-mouse-leave | Se déclenche quand la souris sort d'une cellule. | row, column, cell, event |
-| cell-click | Se déclenche quand l'utilisateur clique sur une cellule. | row, column, cell, event |
-| cell-dblclick | Se déclenche quand l'utilisateur double-clique sur une cellule. | row, column, cell, event |
-| cell-contextmenu | Se déclenche quand l'utilisateur fait un clic droit sur une cellule. | row, column, cell, event |
-| row-click | Se déclenche quand l'utilisateur clique sur une ligne. | row, column, event |
-| row-contextmenu | Se déclenche quand l'utilisateur fait un clic droit sur une ligne. | row, column, event |
-| row-dblclick | Se déclenche quand l'utilisateur double-clique sur une ligne. | row, column, event |
-| header-click | Se déclenche quand l'utilisateur clique sur une colonne du header. | column, event |
-| header-contextmenu | Se déclenche quand l'utilisateur fait un clic droit sur une colonne du header. | column, event |
-| sort-change | Se déclenche quand l'ordre de tri change. | { column, prop, order } |
-| 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  | 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) |
+| Nom                | Description                                                                                                                                  | Paramètres                        |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| select             | Se déclenche quand l'utilisateur clique sur la checkbox d'une ligne.                                                                         | selection, row                    |
+| select-all         | Se déclenche quand l'utilisateur clique sur la checkbox du header.                                                                           | selection                         |
+| selection-change   | Se déclenche quand la selection change.                                                                                                      | selection                         |
+| cell-mouse-enter   | Se déclenche quand la souris passe sur une cellule.                                                                                          | row, column, cell, event          |
+| cell-mouse-leave   | Se déclenche quand la souris sort d'une cellule.                                                                                             | row, column, cell, event          |
+| cell-click         | Se déclenche quand l'utilisateur clique sur une cellule.                                                                                     | row, column, cell, event          |
+| cell-dblclick      | Se déclenche quand l'utilisateur double-clique sur une cellule.                                                                              | row, column, cell, event          |
+| cell-contextmenu   | Se déclenche quand l'utilisateur fait un clic droit sur une cellule.                                                                         | row, column, cell, event          |
+| row-click          | Se déclenche quand l'utilisateur clique sur une ligne.                                                                                       | row, column, event                |
+| row-contextmenu    | Se déclenche quand l'utilisateur fait un clic droit sur une ligne.                                                                           | row, column, event                |
+| row-dblclick       | Se déclenche quand l'utilisateur double-clique sur une ligne.                                                                                | row, column, event                |
+| header-click       | Se déclenche quand l'utilisateur clique sur une colonne du header.                                                                           | column, event                     |
+| header-contextmenu | Se déclenche quand l'utilisateur fait un clic droit sur une colonne du header.                                                               | column, event                     |
+| sort-change        | Se déclenche quand l'ordre de tri change.                                                                                                    | { column, prop, order }           |
+| 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      | 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
 
-| Méthode | Description | Paramètres |
-|------|--------|-------|
-| 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, toggle select all and deselect all | — |
-| 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 |
-| doLayout | Rafraîchi le layout de la table. Quand la visibilité de la table change vous aurez peut-être besoin de cette méthode pour corriger le layout. | — |
-| sort | Tri la table manuellement. La proriété `prop` détermine la colonne, `order` détermine l'ordre de tri. | prop: string, order: string |
+| Méthode            | Description                                                                                                                                                            | Paramètres                  |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| 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, toggle select all and deselect all                                                                                      | —                           |
+| 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                  |
+| doLayout           | Rafraîchi le layout de la table. Quand la visibilité de la table change vous aurez peut-être besoin de cette méthode pour corriger le layout.                          | —                           |
+| sort               | Tri la table manuellement. La proriété `prop` détermine la colonne, `order` détermine l'ordre de tri.                                                                  | prop: string, order: string |
 
 ### Slots de Table
 
-| Nom | Description |
-|------|--------|
+| Nom    | Description                                                                                                                                                                              |
+| ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | append | Contenu à insérer après la dernière ligne. Vous aurez sans doute besoin de ce slot si vous implémentez un scroll infini. Il sera affiché au-dessus de la ligne de somme s'il y en a une. |
 
 ### Attributs de Table-column
 
-| Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | Type de la colonne. Si mis à `selection`, la colonne affichera des checkbox. Si mis à `index`, la colonne affichera l'indice de la ligne (début à 1). Si mis à `expand`, affichera l'icône d'extension.  | string | selection / index / expand | — |
-| index | Personnalise les indices de chaque ligne, marche avec les colonnes `type=index`. | number / function(index) | — | — |
-| label | Label de la colonne. | string | — | — |
-| column-key | La clé de la colonne. Si vous avez besoin d'utiliser l'évènement filter-change, vous aurez besoin de cet attribut pour savoir quelle colonne est filtrée. | string | string | — | — |
-| prop | Nom du champ de l'objet de données. Alias: `property`. | string | — | — |
-| width | Largeur de la colonne. | string / number | — | — |
-| min-width | Largeur minimale de la colonne. Les colonnes avec `width` ont une largeur fixe, alors que celles avec `min-width` ont une largeur proportionnellement distribuée. | string / number | — | — |
-| fixed | Si la colonne est fixée à droite ou à gauche. Fixée à gauche si `true`. | string / boolean | true / 'left' / 'right' | — |
-| render-header | Fonction de rendu pour le header de cette colonne. | function({ column, $index }) | — | — |
-| sortable | Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement `sort-change` de Table. | boolean / string | true, false, 'custom' | false |
-| sort-method | Méthode de tri, marche quand `sortable` est `true`. Doit retourner un nombre, tout comme Array.sort. | function(a, b) | — | — |
-| sort-by | Détermine par quelle propriété effectuer le tri, marche quand `sortable` est `true` et `sort-method` est `undefined`. Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente. | function(row, index) / string / array | — | — |
-| sort-orders | Liste des stratégies de tri, marche quand `sortable` est `true`. Accepte un tableau. Lorsque l'utilisateur clique plusieurs fois sur le header, la colonne est triée dans l'ordre des stratégies indiquée. | array | Les élements du tableau doivent être parmi: `ascending`, `descending` et `null` (restaure l'état originel du tableau). | ['ascending', 'descending', null] |
-| resizable | Si la largeur de la colonne peut être modifiée, marche quand `border` de `el-table` est `true`. | boolean | — | false |
-| formatter | Fonction pour formater le contenu des cellules. | function(row, column, cellValue, index) | — | — |
-| show-overflow-tooltip | Si du contenu trop long doit être caché et affiché dans une tooltip quand la souris passe sur la cellule. | boolean | — | false |
-| align | Alignement. | string | left / center / right | left |
-| header-align | Alignement du header. Si omis, la valeur du `align` ci-dessus est appliqué. | string | left / center / right | — |
-| class-name | Classe des cellules dans cette colonne. | string | — | — |
-| label-class-name | Classe du label de cette colonne. | string | — | — |
-| selectable | Détermine si certaines colonnes peuvent être sélectionnées, marche quand `type` est 'selection'. | function(row, index) | — | — |
-| reserve-selection | Si la sélection doit être conservée après rafraîchissement, marche quand `type` est 'selection'. Notez que `row-key` est requis. | boolean | — | false |
-| filters | Un tableau d'options de filtrage. Pour chaque élément, `text` et `value` sont requis. | array[{ text, value }] | — | — |
-| filter-placement | Emplacement du menu du filtre. | string | Voir `placement` de Tooltip. | — |
-| filter-multiple | Si le filtrage supporte plusieurs options. | boolean | — | true |
-| filter-method | Méthode de filtrage. Si `filter-multiple` est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un `true` sera renvoyé. | function(value, row, column) | — | — |
-| filtered-value | Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec `render-header`. | array | — | — |
+| Attribut              | Description                                                                                                                                                                                                     | Type                                    | Valeurs acceptées                                                                                                      | Défaut                            |
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| type                  | Type de la colonne. Si mis à `selection`, la colonne affichera des checkbox. Si mis à `index`, la colonne affichera l'indice de la ligne (début à 1). Si mis à `expand`, affichera l'icône d'extension.         | string                                  | selection / index / expand                                                                                             | —                                 |
+| index                 | Personnalise les indices de chaque ligne, marche avec les colonnes `type=index`.                                                                                                                                | number / function(index)                | —                                                                                                                      | —                                 |
+| label                 | Label de la colonne.                                                                                                                                                                                            | string                                  | —                                                                                                                      | —                                 |
+| column-key            | La clé de la colonne. Si vous avez besoin d'utiliser l'évènement filter-change, vous aurez besoin de cet attribut pour savoir quelle colonne est filtrée.                                                       | string                                  | string                                                                                                                 | —                                 | — |
+| prop                  | Nom du champ de l'objet de données. Alias: `property`.                                                                                                                                                          | string                                  | —                                                                                                                      | —                                 |
+| width                 | Largeur de la colonne.                                                                                                                                                                                          | string / number                         | —                                                                                                                      | —                                 |
+| min-width             | Largeur minimale de la colonne. Les colonnes avec `width` ont une largeur fixe, alors que celles avec `min-width` ont une largeur proportionnellement distribuée.                                               | string / number                         | —                                                                                                                      | —                                 |
+| fixed                 | Si la colonne est fixée à droite ou à gauche. Fixée à gauche si `true`.                                                                                                                                         | string / boolean                        | true / 'left' / 'right'                                                                                                | —                                 |
+| render-header         | Fonction de rendu pour le header de cette colonne.                                                                                                                                                              | function({ column, \$index })           | —                                                                                                                      | —                                 |
+| sortable              | Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement `sort-change` de Table.                                                                                  | boolean / string                        | true, false, 'custom'                                                                                                  | false                             |
+| sort-method           | Méthode de tri, marche quand `sortable` est `true`. Doit retourner un nombre, tout comme Array.sort.                                                                                                            | function(a, b)                          | —                                                                                                                      | —                                 |
+| sort-by               | Détermine par quelle propriété effectuer le tri, marche quand `sortable` est `true` et `sort-method` est `undefined`. Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente. | function(row, index) / string / array   | —                                                                                                                      | —                                 |
+| sort-orders           | Liste des stratégies de tri, marche quand `sortable` est `true`. Accepte un tableau. Lorsque l'utilisateur clique plusieurs fois sur le header, la colonne est triée dans l'ordre des stratégies indiquée.      | array                                   | Les élements du tableau doivent être parmi: `ascending`, `descending` et `null` (restaure l'état originel du tableau). | ['ascending', 'descending', null] |
+| resizable             | Si la largeur de la colonne peut être modifiée, marche quand `border` de `el-table` est `true`.                                                                                                                 | boolean                                 | —                                                                                                                      | false                             |
+| formatter             | Fonction pour formater le contenu des cellules.                                                                                                                                                                 | function(row, column, cellValue, index) | —                                                                                                                      | —                                 |
+| show-overflow-tooltip | Si du contenu trop long doit être caché et affiché dans une tooltip quand la souris passe sur la cellule.                                                                                                       | boolean                                 | —                                                                                                                      | false                             |
+| align                 | Alignement.                                                                                                                                                                                                     | string                                  | left / center / right                                                                                                  | left                              |
+| header-align          | Alignement du header. Si omis, la valeur du `align` ci-dessus est appliqué.                                                                                                                                     | string                                  | left / center / right                                                                                                  | —                                 |
+| class-name            | Classe des cellules dans cette colonne.                                                                                                                                                                         | string                                  | —                                                                                                                      | —                                 |
+| label-class-name      | Classe du label de cette colonne.                                                                                                                                                                               | string                                  | —                                                                                                                      | —                                 |
+| selectable            | Détermine si certaines colonnes peuvent être sélectionnées, marche quand `type` est 'selection'.                                                                                                                | function(row, index)                    | —                                                                                                                      | —                                 |
+| reserve-selection     | Si la sélection doit être conservée après rafraîchissement, marche quand `type` est 'selection'. Notez que `row-key` est requis.                                                                                | boolean                                 | —                                                                                                                      | false                             |
+| filters               | Un tableau d'options de filtrage. Pour chaque élément, `text` et `value` sont requis.                                                                                                                           | array[{ text, value }]                  | —                                                                                                                      | —                                 |
+| filter-placement      | Emplacement du menu du filtre.                                                                                                                                                                                  | string                                  | Voir `placement` de Tooltip.                                                                                           | —                                 |
+| filter-multiple       | Si le filtrage supporte plusieurs options.                                                                                                                                                                      | boolean                                 | —                                                                                                                      | true                              |
+| filter-method         | Méthode de filtrage. Si `filter-multiple` est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un `true` sera renvoyé.                                           | function(value, row, column)            | —                                                                                                                      | —                                 |
+| filtered-value        | Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec `render-header`.                                                                                               | array                                   | —                                                                                                                      | —                                 |
 
 ### Slot de Table-column
 
-| Nom | Description |
-|------|--------|
-| — | Contenu personnalisé pour les colonnes. Les paramètres sont { row, column, $index } |
-| header | Contenu personnalisé pour le header. Le paramètre de scope est { column, $index } |
+| Nom    | Description                                                                          |
+| ------ | ------------------------------------------------------------------------------------ |
+| —      | Contenu personnalisé pour les colonnes. Les paramètres sont { row, column, \$index } |
+| header | Contenu personnalisé pour le header. Le paramètre de scope est { column, \$index }   |
diff --git a/website/docs/jp/table.md b/website/docs/jp/table.md
index 65ebe3fab1..431f48515a 100644
--- a/website/docs/jp/table.md
+++ b/website/docs/jp/table.md
@@ -199,11 +199,10 @@
 
 <style>
   .el-table .warning-row {
-    background: oldlace;
+    --el-table-tr-background-color: var(--el-color-warning-lighter);
   }
-
   .el-table .success-row {
-    background: #f0f9eb;
+    --el-table-tr-background-color: var(--el-color-success-lighter);
   }
 </style>
 
diff --git a/website/docs/zh-CN/table.md b/website/docs/zh-CN/table.md
index bb7964f67c..548bab1c7b 100644
--- a/website/docs/zh-CN/table.md
+++ b/website/docs/zh-CN/table.md
@@ -7,54 +7,48 @@
 基础的表格展示用法。
 
 :::demo 当 `el-table` 元素中注入 `data` 对象数组后，在 `el-table-column` 中用 `prop` 属性来对应对象中的键名即可填入数据，用 `label` 属性来定义表格的列名。可以使用 `width` 属性来定义列宽。
-```html
-  <template>
-    <el-table
-      :data="tableData"
-      style="width: 100%">
-      <el-table-column
-        prop="date"
-        label="日期"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="姓名"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="地址">
-      </el-table-column>
-    </el-table>
-  </template>
 
-  <script>
-    export default {
-      data() {
-        return {
-          tableData: [{
+```html
+<template>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+    <el-table-column prop="address" label="地址"> </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [
+          {
             date: '2016-05-02',
             name: '王小虎',
-            address: '上海市普陀区金沙江路 1518 弄'
-          }, {
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
             date: '2016-05-04',
             name: '王小虎',
-            address: '上海市普陀区金沙江路 1517 弄'
-          }, {
+            address: '上海市普陀区金沙江路 1517 弄',
+          },
+          {
             date: '2016-05-01',
             name: '王小虎',
-            address: '上海市普陀区金沙江路 1519 弄'
-          }, {
+            address: '上海市普陀区金沙江路 1519 弄',
+          },
+          {
             date: '2016-05-03',
             name: '王小虎',
-            address: '上海市普陀区金沙江路 1516 弄'
-          }]
-        }
+            address: '上海市普陀区金沙江路 1516 弄',
+          },
+        ],
       }
-    }
-  </script>
+    },
+  }
+</script>
 ```
+
 :::
 
 ### 带斑马纹表格
@@ -62,26 +56,13 @@
 使用带斑马纹的表格，可以更容易区分出不同行的数据。
 
 :::demo `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean`，默认为 `false`，设置为 `true` 即为启用。
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    stripe
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="日期"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址">
-    </el-table-column>
+  <el-table :data="tableData" stripe style="width: 100%">
+    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+    <el-table-column prop="address" label="地址"> </el-table-column>
   </el-table>
 </template>
 
@@ -89,53 +70,46 @@
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }]
+        tableData: [
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄',
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### 带边框表格
 
 :::demo 默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用 `border` 属性，它接受一个 `Boolean`，设置为 `true` 即可启用。
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    border
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="日期"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址">
-    </el-table-column>
+  <el-table :data="tableData" border style="width: 100%">
+    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+    <el-table-column prop="address" label="地址"> </el-table-column>
   </el-table>
 </template>
 
@@ -143,28 +117,34 @@
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }]
+        tableData: [
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄',
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### 带状态表格
@@ -172,75 +152,71 @@
 可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。
 
 :::demo 可以通过指定 Table 组件的 `row-class-name` 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。
+
 ```html
 <template>
   <el-table
     :data="tableData"
     style="width: 100%"
-    :row-class-name="tableRowClassName">
-    <el-table-column
-      prop="date"
-      label="日期"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址">
-    </el-table-column>
+    :row-class-name="tableRowClassName"
+  >
+    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+    <el-table-column prop="address" label="地址"> </el-table-column>
   </el-table>
 </template>
 
 <style>
   .el-table .warning-row {
-    background: oldlace;
+    --el-table-tr-background-color: var(--el-color-warning-lighter);
   }
-
   .el-table .success-row {
-    background: #f0f9eb;
+    --el-table-tr-background-color: var(--el-color-success-lighter);
   }
 </style>
 
 <script>
   export default {
     methods: {
-      tableRowClassName({row, rowIndex}) {
+      tableRowClassName({ row, rowIndex }) {
         if (rowIndex === 1) {
-          return 'warning-row';
+          return 'warning-row'
         } else if (rowIndex === 3) {
-          return 'success-row';
+          return 'success-row'
         }
-        return '';
-      }
+        return ''
+      },
     },
     data() {
       return {
-        tableData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }]
+        tableData: [
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### 固定表头
@@ -248,27 +224,13 @@
 纵向内容过多时，可选择固定表头。
 
 :::demo 只要在 `el-table` 元素中定义了 `height` 属性，即可实现固定表头的表格，而不需要额外的代码。
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    height="250"
-    border
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="日期"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址">
-    </el-table-column>
+  <el-table :data="tableData" height="250" border style="width: 100%">
+    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+    <el-table-column prop="address" label="地址"> </el-table-column>
   </el-table>
 </template>
 
@@ -276,40 +238,49 @@
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-08',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-06',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-07',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-08',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-06',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-07',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### 固定列
@@ -317,49 +288,23 @@
 横向内容过多时，可选择固定列。
 
 :::demo 固定列需要使用 `fixed` 属性，它接受 Boolean 值或者 `left` `right`，表示左边固定还是右边固定。
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    border
-    style="width: 100%">
-    <el-table-column
-      fixed
-      prop="date"
-      label="日期"
-      width="150">
+  <el-table :data="tableData" border style="width: 100%">
+    <el-table-column fixed prop="date" label="日期" width="150">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="120">
+    <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
+    <el-table-column prop="province" label="省份" width="120">
     </el-table-column>
-    <el-table-column
-      prop="province"
-      label="省份"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="city"
-      label="市区"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址"
-      width="600">
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="邮编"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      fixed="right"
-      label="操作"
-      width="100">
+    <el-table-column prop="city" label="市区" width="120"> </el-table-column>
+    <el-table-column prop="address" label="地址" width="600"> </el-table-column>
+    <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
+    <el-table-column fixed="right" label="操作" width="100">
       <template #default="scope">
-        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
+        <el-button @click="handleClick(scope.row)" type="text" size="small"
+          >查看</el-button
+        >
         <el-button type="text" size="small">编辑</el-button>
       </template>
     </el-table-column>
@@ -370,46 +315,52 @@
   export default {
     methods: {
       handleClick(row) {
-        console.log(row);
-      }
+        console.log(row)
+      },
     },
 
     data() {
       return {
-        tableData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1517 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1519 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1516 弄',
-          zip: 200333
-        }]
+        tableData: [
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1517 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1519 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1516 弄',
+            zip: 200333,
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### 固定列和表头
@@ -417,43 +368,18 @@
 横纵内容过多时，可选择固定列和表头。
 
 :::demo 固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%"
-    height="250">
-    <el-table-column
-      fixed
-      prop="date"
-      label="日期"
-      width="150">
+  <el-table :data="tableData" style="width: 100%" height="250">
+    <el-table-column fixed prop="date" label="日期" width="150">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="province"
-      label="省份"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="city"
-      label="市区"
-      width="320">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址"
-      width="600">
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="邮编"
-      width="120">
+    <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
+    <el-table-column prop="province" label="省份" width="120">
     </el-table-column>
+    <el-table-column prop="city" label="市区" width="320"> </el-table-column>
+    <el-table-column prop="address" label="地址" width="600"> </el-table-column>
+    <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
   </el-table>
 </template>
 
@@ -461,61 +387,70 @@
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-08',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-06',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-07',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-08',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-06',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-07',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### 流体高度
@@ -523,52 +458,25 @@
 当数据量动态变化时，可以为 Table 设置一个最大高度。
 
 :::demo 通过设置 `max-height` 属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%"
-    max-height="250">
-    <el-table-column
-      fixed
-      prop="date"
-      label="日期"
-      width="150">
+  <el-table :data="tableData" style="width: 100%" max-height="250">
+    <el-table-column fixed prop="date" label="日期" width="150">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="120">
+    <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
+    <el-table-column prop="province" label="省份" width="120">
     </el-table-column>
-    <el-table-column
-      prop="province"
-      label="省份"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="city"
-      label="市区"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址"
-      width="600">
-    </el-table-column>
-    <el-table-column
-      prop="zip"
-      label="邮编"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      fixed="right"
-      label="操作"
-      width="120">
+    <el-table-column prop="city" label="市区" width="120"> </el-table-column>
+    <el-table-column prop="address" label="地址" width="600"> </el-table-column>
+    <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
+    <el-table-column fixed="right" label="操作" width="120">
       <template #default="scope">
         <el-button
           @click.prevent="deleteRow(scope.$index, tableData)"
           type="text"
-          size="small">
+          size="small"
+        >
           移除
         </el-button>
       </template>
@@ -580,66 +488,75 @@
   export default {
     methods: {
       deleteRow(index, rows) {
-        rows.splice(index, 1);
-      }
+        rows.splice(index, 1)
+      },
     },
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-08',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-06',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-07',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-08',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-06',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-07',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### 多级表头
@@ -647,42 +564,20 @@
 数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
 
 :::demo 只需要在 `el-table-column` 里面嵌套 `el-table-column`，就可以实现多级表头。
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
-    <el-table-column
-      prop="date"
-      label="日期"
-      width="150">
-    </el-table-column>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="date" label="日期" width="150"> </el-table-column>
     <el-table-column label="配送信息">
-      <el-table-column
-        prop="name"
-        label="姓名"
-        width="120">
-      </el-table-column>
+      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
       <el-table-column label="地址">
-        <el-table-column
-          prop="province"
-          label="省份"
-          width="120">
+        <el-table-column prop="province" label="省份" width="120">
         </el-table-column>
-        <el-table-column
-          prop="city"
-          label="市区"
-          width="120">
-        </el-table-column>
-        <el-table-column
-          prop="address"
-          label="地址">
-        </el-table-column>
-        <el-table-column
-          prop="zip"
-          label="邮编"
-          width="120">
+        <el-table-column prop="city" label="市区" width="120">
         </el-table-column>
+        <el-table-column prop="address" label="地址"> </el-table-column>
+        <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
       </el-table-column>
     </el-table-column>
   </el-table>
@@ -692,61 +587,70 @@
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-08',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-06',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }, {
-          date: '2016-05-07',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333
-        }]
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-08',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-06',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+          {
+            date: '2016-05-07',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### 单选
@@ -754,6 +658,7 @@
 选择单行数据时使用色块表示。
 
 :::demo Table 组件提供了单选的支持，只需要配置 `highlight-current-row` 属性即可实现单选。之后由 `current-change` 事件来管理选中时触发的事件，它会传入 `currentRow`，`oldCurrentRow`。如果需要显示索引，可以增加一列 `el-table-column`，设置 `type` 属性为 `index` 即可显示从 1 开始的索引号。
+
 ```html
 <template>
   <el-table
@@ -761,25 +666,14 @@
     :data="tableData"
     highlight-current-row
     @current-change="handleCurrentChange"
-    style="width: 100%">
-    <el-table-column
-      type="index"
-      width="50">
+    style="width: 100%"
+  >
+    <el-table-column type="index" width="50"> </el-table-column>
+    <el-table-column property="date" label="日期" width="120">
     </el-table-column>
-    <el-table-column
-      property="date"
-      label="日期"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      property="name"
-      label="姓名"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      property="address"
-      label="地址">
+    <el-table-column property="name" label="姓名" width="120">
     </el-table-column>
+    <el-table-column property="address" label="地址"> </el-table-column>
   </el-table>
   <div style="margin-top: 20px">
     <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
@@ -791,38 +685,44 @@
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }],
-        currentRow: null
+        tableData: [
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄',
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+          },
+        ],
+        currentRow: null,
       }
     },
 
     methods: {
       setCurrent(row) {
-        this.$refs.singleTable.setCurrentRow(row);
+        this.$refs.singleTable.setCurrentRow(row)
       },
       handleCurrentChange(val) {
-        this.currentRow = val;
-      }
-    }
+        this.currentRow = val
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### 多选
@@ -830,6 +730,7 @@
 选择多行数据时使用 Checkbox。
 
 :::demo 实现多选非常简单: 手动添加一个 `el-table-column`，设 `type` 属性为 `selection` 即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用 `show-overflow-tooltip` 属性，它接受一个 `Boolean`，为 `true` 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
+
 ```html
 <template>
   <el-table
@@ -837,29 +738,20 @@
     :data="tableData"
     tooltip-effect="dark"
     style="width: 100%"
-    @selection-change="handleSelectionChange">
-    <el-table-column
-      type="selection"
-      width="55">
-    </el-table-column>
-    <el-table-column
-      label="日期"
-      width="120">
+    @selection-change="handleSelectionChange"
+  >
+    <el-table-column type="selection" width="55"> </el-table-column>
+    <el-table-column label="日期" width="120">
       <template #default="scope">{{ scope.row.date }}</template>
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="120">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址"
-      show-overflow-tooltip>
+    <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
+    <el-table-column prop="address" label="地址" show-overflow-tooltip>
     </el-table-column>
   </el-table>
   <div style="margin-top: 20px">
-    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+    <el-button @click="toggleSelection([tableData[1], tableData[2]])"
+      >切换第二、第三行的选中状态</el-button
+    >
     <el-button @click="toggleSelection()">取消选择</el-button>
   </div>
 </template>
@@ -868,36 +760,44 @@
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-08',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-06',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-07',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }],
-        multipleSelection: []
+        tableData: [
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-08',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-06',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-07',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+        ],
+        multipleSelection: [],
       }
     },
 
@@ -905,19 +805,20 @@
       toggleSelection(rows) {
         if (rows) {
           rows.forEach(row => {
-            this.$refs.multipleTable.toggleRowSelection(row);
-          });
+            this.$refs.multipleTable.toggleRowSelection(row)
+          })
         } else {
-          this.$refs.multipleTable.clearSelection();
+          this.$refs.multipleTable.clearSelection()
         }
       },
       handleSelectionChange(val) {
-        this.multipleSelection = val;
-      }
-    }
+        this.multipleSelection = val
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### 排序
@@ -925,29 +826,19 @@
 对表格进行排序，可快速查找或对比数据。
 
 :::demo 在列中设置 `sortable` 属性即可实现以该列为基准的排序，接受一个 `Boolean`，默认为 `false`。可以通过 Table 的 `default-sort` 属性设置默认的排序列和排序顺序。可以使用 `sort-method` 或者 `sort-by` 使用自定义的排序规则。如果需要后端排序，需将 `sortable` 设置为 `custom`，同时在 Table 上监听 `sort-change` 事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了 `formatter` 属性，它用于格式化指定列的值，接受一个 `Function`，会传入两个参数：`row` 和 `column`，可以根据自己的需求进行处理。
+
 ```html
 <template>
   <el-table
     :data="tableData"
     style="width: 100%"
-    :default-sort = "{prop: 'date', order: 'descending'}"
-    >
-    <el-table-column
-      prop="date"
-      label="日期"
-      sortable
-      width="180">
+    :default-sort="{prop: 'date', order: 'descending'}"
+  >
+    <el-table-column prop="date" label="日期" sortable width="180">
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      sortable
-      width="180">
+    <el-table-column prop="name" label="姓名" sortable width="180">
     </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址"
-      :formatter="formatter">
+    <el-table-column prop="address" label="地址" :formatter="formatter">
     </el-table-column>
   </el-table>
 </template>
@@ -956,33 +847,39 @@
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }]
+        tableData: [
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄',
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+          },
+        ],
       }
     },
     methods: {
       formatter(row, column) {
-        return row.address;
-      }
-    }
+        return row.address
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### 筛选
@@ -990,6 +887,7 @@
 对表格进行筛选，可快速查找到自己想看的数据。
 
 :::demo 在列中设置 `filters` `filter-method` 属性即可开启该列的筛选，filters 是一个数组，`filter-method` 是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。
+
 ```html
 <template>
   <el-button @click="resetDateFilter">清除日期过滤器</el-button>
@@ -998,7 +896,8 @@
     row-key="date"
     ref="filterTable"
     :data="tableData"
-    style="width: 100%">
+    style="width: 100%"
+  >
     <el-table-column
       prop="date"
       label="日期"
@@ -1009,15 +908,8 @@
       :filter-method="filterHandler"
     >
     </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址"
-      :formatter="formatter">
+    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+    <el-table-column prop="address" label="地址" :formatter="formatter">
     </el-table-column>
     <el-table-column
       prop="tag"
@@ -1025,11 +917,14 @@
       width="100"
       :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
       :filter-method="filterTag"
-      filter-placement="bottom-end">
+      filter-placement="bottom-end"
+    >
       <template #default="scope">
         <el-tag
           :type="scope.row.tag === '家' ? 'primary' : 'success'"
-          disable-transitions>{{scope.row.tag}}</el-tag>
+          disable-transitions
+          >{{scope.row.tag}}</el-tag
+        >
       </template>
     </el-table-column>
   </el-table>
@@ -1039,72 +934,73 @@
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄',
-          tag: '家'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄',
-          tag: '公司'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-          tag: '家'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄',
-          tag: '公司'
-        }]
+        tableData: [
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+            tag: '家',
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄',
+            tag: '公司',
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+            tag: '家',
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+            tag: '公司',
+          },
+        ],
       }
     },
     methods: {
       resetDateFilter() {
-        this.$refs.filterTable.clearFilter('date');
+        this.$refs.filterTable.clearFilter('date')
       },
       clearFilter() {
-        this.$refs.filterTable.clearFilter();
+        this.$refs.filterTable.clearFilter()
       },
       formatter(row, column) {
-        return row.address;
+        return row.address
       },
       filterTag(value, row) {
-        return row.tag === value;
+        return row.tag === value
       },
       filterHandler(value, row, column) {
-        const property = column['property'];
-        return row[property] === value;
-      }
-    }
+        const property = column['property']
+        return row[property] === value
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### 自定义列模板
 
 自定义列的显示内容，可组合其他组件使用。
-:::demo 通过 `slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。
+:::demo 通过 `slot` 可以获取到 row, column, \$index 和 store（table 内部的状态管理）的数据，用法参考 demo。
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
-    <el-table-column
-      label="日期"
-      width="180">
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column label="日期" width="180">
       <template #default="scope">
         <i class="el-icon-time"></i>
         <span style="margin-left: 10px">{{ scope.row.date }}</span>
       </template>
     </el-table-column>
-    <el-table-column
-      label="姓名"
-      width="180">
+    <el-table-column label="姓名" width="180">
       <template #default="scope">
         <el-popover effect="light" trigger="hover" placement="top">
           <template #default>
@@ -1121,13 +1017,15 @@
     </el-table-column>
     <el-table-column label="操作">
       <template #default="scope">
-        <el-button
-          size="mini"
-          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
+          >编辑</el-button
+        >
         <el-button
           size="mini"
           type="danger"
-          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+          @click="handleDelete(scope.$index, scope.row)"
+          >删除</el-button
+        >
       </template>
     </el-table-column>
   </el-table>
@@ -1137,47 +1035,52 @@
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }]
+        tableData: [
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄',
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+          },
+        ],
       }
     },
     methods: {
       handleEdit(index, row) {
-        console.log(index, row);
+        console.log(index, row)
       },
       handleDelete(index, row) {
-        console.log(index, row);
-      }
-    }
+        console.log(index, row)
+      },
+    },
   }
 </script>
 ```
+
 :::
 
 ### 展开行
 
 当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。
 :::demo 通过设置 `type="expand"` 和 `slot` 可以开启展开行功能，`el-table-column` 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 `slot` 相同。
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
+  <el-table :data="tableData" style="width: 100%">
     <el-table-column type="expand">
       <template #default="props">
         <el-form label-position="left" inline class="demo-table-expand">
@@ -1205,18 +1108,9 @@
         </el-form>
       </template>
     </el-table-column>
-    <el-table-column
-      label="商品 ID"
-      prop="id">
-    </el-table-column>
-    <el-table-column
-      label="商品名称"
-      prop="name">
-    </el-table-column>
-    <el-table-column
-      label="描述"
-      prop="desc">
-    </el-table-column>
+    <el-table-column label="商品 ID" prop="id"> </el-table-column>
+    <el-table-column label="商品名称" prop="name"> </el-table-column>
+    <el-table-column label="描述" prop="desc"> </el-table-column>
   </el-table>
 </template>
 
@@ -1239,44 +1133,50 @@
   export default {
     data() {
       return {
-        tableData: [{
-          id: '12987122',
-          name: '好滋好味鸡蛋仔',
-          category: '江浙小吃、小吃零食',
-          desc: '荷兰优质淡奶，奶香浓而不腻',
-          address: '上海市普陀区真北路',
-          shop: '王小虎夫妻店',
-          shopId: '10333'
-        }, {
-          id: '12987123',
-          name: '好滋好味鸡蛋仔',
-          category: '江浙小吃、小吃零食',
-          desc: '荷兰优质淡奶，奶香浓而不腻',
-          address: '上海市普陀区真北路',
-          shop: '王小虎夫妻店',
-          shopId: '10333'
-        }, {
-          id: '12987125',
-          name: '好滋好味鸡蛋仔',
-          category: '江浙小吃、小吃零食',
-          desc: '荷兰优质淡奶，奶香浓而不腻',
-          address: '上海市普陀区真北路',
-          shop: '王小虎夫妻店',
-          shopId: '10333'
-        }, {
-          id: '12987126',
-          name: '好滋好味鸡蛋仔',
-          category: '江浙小吃、小吃零食',
-          desc: '荷兰优质淡奶，奶香浓而不腻',
-          address: '上海市普陀区真北路',
-          shop: '王小虎夫妻店',
-          shopId: '10333'
-        }]
+        tableData: [
+          {
+            id: '12987122',
+            name: '好滋好味鸡蛋仔',
+            category: '江浙小吃、小吃零食',
+            desc: '荷兰优质淡奶，奶香浓而不腻',
+            address: '上海市普陀区真北路',
+            shop: '王小虎夫妻店',
+            shopId: '10333',
+          },
+          {
+            id: '12987123',
+            name: '好滋好味鸡蛋仔',
+            category: '江浙小吃、小吃零食',
+            desc: '荷兰优质淡奶，奶香浓而不腻',
+            address: '上海市普陀区真北路',
+            shop: '王小虎夫妻店',
+            shopId: '10333',
+          },
+          {
+            id: '12987125',
+            name: '好滋好味鸡蛋仔',
+            category: '江浙小吃、小吃零食',
+            desc: '荷兰优质淡奶，奶香浓而不腻',
+            address: '上海市普陀区真北路',
+            shop: '王小虎夫妻店',
+            shopId: '10333',
+          },
+          {
+            id: '12987126',
+            name: '好滋好味鸡蛋仔',
+            category: '江浙小吃、小吃零食',
+            desc: '荷兰优质淡奶，奶香浓而不腻',
+            address: '上海市普陀区真北路',
+            shop: '王小虎夫妻店',
+            shopId: '10333',
+          },
+        ],
       }
-    }
+    },
   }
 </script>
 ```
+
 :::
 
 ### 树形数据与懒加载
@@ -1285,115 +1185,108 @@
 
 ```html
 <template>
-<div>
-  <el-table
-    :data="tableData"
-    style="width: 100%;margin-bottom: 20px;"
-    row-key="id"
-    border
-    default-expand-all
-    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
-    <el-table-column
-      prop="date"
-      label="日期"
-      sortable
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      sortable
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址">
-    </el-table-column>
-  </el-table>
+  <div>
+    <el-table
+      :data="tableData"
+      style="width: 100%;margin-bottom: 20px;"
+      row-key="id"
+      border
+      default-expand-all
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column prop="date" label="日期" sortable width="180">
+      </el-table-column>
+      <el-table-column prop="name" label="姓名" sortable width="180">
+      </el-table-column>
+      <el-table-column prop="address" label="地址"> </el-table-column>
+    </el-table>
 
-  <el-table
-    :data="tableData1"
-    style="width: 100%"
-    row-key="id"
-    border
-    lazy
-    :load="load"
-    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
-    <el-table-column
-      prop="date"
-      label="日期"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址">
-    </el-table-column>
-  </el-table>
-</div>
+    <el-table
+      :data="tableData1"
+      style="width: 100%"
+      row-key="id"
+      border
+      lazy
+      :load="load"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+      <el-table-column prop="address" label="地址"> </el-table-column>
+    </el-table>
+  </div>
 </template>
 <script>
   export default {
     data() {
       return {
-        tableData: [{
-          id: 1,
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          id: 2,
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          id: 3,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-          children: [{
-              id: 31,
-              date: '2016-05-01',
-              name: '王小虎',
-              address: '上海市普陀区金沙江路 1519 弄'
-            }, {
-              id: 32,
-              date: '2016-05-01',
-              name: '王小虎',
-              address: '上海市普陀区金沙江路 1519 弄'
-          }]
-        }, {
-          id: 4,
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }],
-        tableData1: [{
-          id: 1,
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          id: 2,
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          id: 3,
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄',
-          hasChildren: true
-        }, {
-          id: 4,
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }]
+        tableData: [
+          {
+            id: 1,
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            id: 2,
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄',
+          },
+          {
+            id: 3,
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+            children: [
+              {
+                id: 31,
+                date: '2016-05-01',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1519 弄',
+              },
+              {
+                id: 32,
+                date: '2016-05-01',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1519 弄',
+              },
+            ],
+          },
+          {
+            id: 4,
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+          },
+        ],
+        tableData1: [
+          {
+            id: 1,
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            id: 2,
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄',
+          },
+          {
+            id: 3,
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+            hasChildren: true,
+          },
+          {
+            id: 4,
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+          },
+        ],
       }
     },
     methods: {
@@ -1404,20 +1297,22 @@
               id: 31,
               date: '2016-05-01',
               name: '王小虎',
-              address: '上海市普陀区金沙江路 1519 弄'
-            }, {
+              address: '上海市普陀区金沙江路 1519 弄',
+            },
+            {
               id: 32,
               date: '2016-05-01',
               name: '王小虎',
-              address: '上海市普陀区金沙江路 1519 弄'
-            }
+              address: '上海市普陀区金沙江路 1519 弄',
+            },
           ])
         }, 1000)
-      }
+      },
     },
   }
 </script>
 ```
+
 :::
 
 ### 自定义表头
@@ -1425,35 +1320,29 @@
 表头支持自定义。
 
 :::demo 通过设置 [slot](https://v3.vuejs.org/guide/component-slots.html) 来自定义表头。
+
 ```html
 <template>
   <el-table
     :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
-    style="width: 100%">
-    <el-table-column
-      label="Date"
-      prop="date">
-    </el-table-column>
-    <el-table-column
-      label="Name"
-      prop="name">
-    </el-table-column>
-    <el-table-column
-      align="right">
+    style="width: 100%"
+  >
+    <el-table-column label="Date" prop="date"> </el-table-column>
+    <el-table-column label="Name" prop="name"> </el-table-column>
+    <el-table-column align="right">
       <template #header>
-        <el-input
-          v-model="search"
-          size="mini"
-          placeholder="输入关键字搜索"/>
+        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
       </template>
       <template #default="scope">
-        <el-button
-          size="mini"
-          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
+        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
+          >Edit</el-button
+        >
         <el-button
           size="mini"
           type="danger"
-          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
+          @click="handleDelete(scope.$index, scope.row)"
+          >Delete</el-button
+        >
       </template>
     </el-table-column>
   </el-table>
@@ -1463,74 +1352,58 @@
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1517 弄'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1519 弄'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1516 弄'
-        }],
-        search: ''
+        tableData: [
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄',
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄',
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄',
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄',
+          },
+        ],
+        search: '',
       }
     },
     methods: {
       handleEdit(index, row) {
-        console.log(index, row);
+        console.log(index, row)
       },
       handleDelete(index, row) {
-        console.log(index, row);
-      }
+        console.log(index, row)
+      },
     },
   }
 </script>
 ```
+
 :::
 
 ### 表尾合计行
 
 若表格展示的是各类数字，可以在表尾显示各列的合计。
 :::demo 将 `show-summary` 设置为 `true` 就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过 `sum-text` 配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 `summary-method` 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。
+
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    border
-    show-summary
-    style="width: 100%">
-    <el-table-column
-      prop="id"
-      label="ID"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名">
-    </el-table-column>
-    <el-table-column
-      prop="amount1"
-      sortable
-      label="数值 1">
-    </el-table-column>
-    <el-table-column
-      prop="amount2"
-      sortable
-      label="数值 2">
-    </el-table-column>
-    <el-table-column
-      prop="amount3"
-      sortable
-      label="数值 3">
-    </el-table-column>
+  <el-table :data="tableData" border show-summary style="width: 100%">
+    <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+    <el-table-column prop="name" label="姓名"> </el-table-column>
+    <el-table-column prop="amount1" sortable label="数值 1"> </el-table-column>
+    <el-table-column prop="amount2" sortable label="数值 2"> </el-table-column>
+    <el-table-column prop="amount3" sortable label="数值 3"> </el-table-column>
   </el-table>
 
   <el-table
@@ -1539,28 +1412,13 @@
     height="200"
     :summary-method="getSummaries"
     show-summary
-    style="width: 100%; margin-top: 20px">
-    <el-table-column
-      prop="id"
-      label="ID"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名">
-    </el-table-column>
-    <el-table-column
-      prop="amount1"
-      label="数值 1（元）">
-    </el-table-column>
-    <el-table-column
-      prop="amount2"
-      label="数值 2（元）">
-    </el-table-column>
-    <el-table-column
-      prop="amount3"
-      label="数值 3（元）">
-    </el-table-column>
+    style="width: 100%; margin-top: 20px"
+  >
+    <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+    <el-table-column prop="name" label="姓名"> </el-table-column>
+    <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
+    <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
+    <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
   </el-table>
 </template>
 
@@ -1568,70 +1426,77 @@
   export default {
     data() {
       return {
-        tableData: [{
-          id: '12987122',
-          name: '王小虎',
-          amount1: '234',
-          amount2: '3.2',
-          amount3: 10
-        }, {
-          id: '12987123',
-          name: '王小虎',
-          amount1: '165',
-          amount2: '4.43',
-          amount3: 12
-        }, {
-          id: '12987124',
-          name: '王小虎',
-          amount1: '324',
-          amount2: '1.9',
-          amount3: 9
-        }, {
-          id: '12987125',
-          name: '王小虎',
-          amount1: '621',
-          amount2: '2.2',
-          amount3: 17
-        }, {
-          id: '12987126',
-          name: '王小虎',
-          amount1: '539',
-          amount2: '4.1',
-          amount3: 15
-        }]
-      };
+        tableData: [
+          {
+            id: '12987122',
+            name: '王小虎',
+            amount1: '234',
+            amount2: '3.2',
+            amount3: 10,
+          },
+          {
+            id: '12987123',
+            name: '王小虎',
+            amount1: '165',
+            amount2: '4.43',
+            amount3: 12,
+          },
+          {
+            id: '12987124',
+            name: '王小虎',
+            amount1: '324',
+            amount2: '1.9',
+            amount3: 9,
+          },
+          {
+            id: '12987125',
+            name: '王小虎',
+            amount1: '621',
+            amount2: '2.2',
+            amount3: 17,
+          },
+          {
+            id: '12987126',
+            name: '王小虎',
+            amount1: '539',
+            amount2: '4.1',
+            amount3: 15,
+          },
+        ],
+      }
     },
     methods: {
       getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
+        const { columns, data } = param
+        const sums = []
         columns.forEach((column, index) => {
           if (index === 0) {
-            sums[index] = '总价';
-            return;
+            sums[index] = '总价'
+            return
           }
-          const values = data.map(item => Number(item[column.property]));
+          const values = data.map(item => Number(item[column.property]))
           if (!values.every(value => isNaN(value))) {
             sums[index] = values.reduce((prev, curr) => {
-              const value = Number(curr);
+              const value = Number(curr)
               if (!isNaN(value)) {
-                return prev + curr;
+                return prev + curr
               } else {
-                return prev;
+                return prev
               }
-            }, 0);
-            sums[index] += ' 元';
+            }, 0)
+            sums[index] += ' 元'
           } else {
-            sums[index] = 'N/A';
+            sums[index] = 'N/A'
           }
-        });
+        })
 
-        return sums;
-      }
-    }
-  };
+        return sums
+      },
+    },
+  }
 </script>
 ```
+
 :::
 
 ### 合并行或列
@@ -1646,30 +1511,15 @@
       :data="tableData"
       :span-method="arraySpanMethod"
       border
-      style="width: 100%">
-      <el-table-column
-        prop="id"
-        label="ID"
-        width="180">
+      style="width: 100%"
+    >
+      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+      <el-table-column prop="name" label="姓名"> </el-table-column>
+      <el-table-column prop="amount1" sortable label="数值 1">
       </el-table-column>
-      <el-table-column
-        prop="name"
-        label="姓名">
+      <el-table-column prop="amount2" sortable label="数值 2">
       </el-table-column>
-      <el-table-column
-        prop="amount1"
-        sortable
-        label="数值 1">
-      </el-table-column>
-      <el-table-column
-        prop="amount2"
-        sortable
-        label="数值 2">
-      </el-table-column>
-      <el-table-column
-        prop="amount3"
-        sortable
-        label="数值 3">
+      <el-table-column prop="amount3" sortable label="数值 3">
       </el-table-column>
     </el-table>
 
@@ -1677,28 +1527,13 @@
       :data="tableData"
       :span-method="objectSpanMethod"
       border
-      style="width: 100%; margin-top: 20px">
-      <el-table-column
-        prop="id"
-        label="ID"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="姓名">
-      </el-table-column>
-      <el-table-column
-        prop="amount1"
-        label="数值 1（元）">
-      </el-table-column>
-      <el-table-column
-        prop="amount2"
-        label="数值 2（元）">
-      </el-table-column>
-      <el-table-column
-        prop="amount3"
-        label="数值 3（元）">
-      </el-table-column>
+      style="width: 100%; margin-top: 20px"
+    >
+      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
+      <el-table-column prop="name" label="姓名"> </el-table-column>
+      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
+      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
+      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
     </el-table>
   </div>
 </template>
@@ -1707,46 +1542,52 @@
   export default {
     data() {
       return {
-        tableData: [{
-          id: '12987122',
-          name: '王小虎',
-          amount1: '234',
-          amount2: '3.2',
-          amount3: 10
-        }, {
-          id: '12987123',
-          name: '王小虎',
-          amount1: '165',
-          amount2: '4.43',
-          amount3: 12
-        }, {
-          id: '12987124',
-          name: '王小虎',
-          amount1: '324',
-          amount2: '1.9',
-          amount3: 9
-        }, {
-          id: '12987125',
-          name: '王小虎',
-          amount1: '621',
-          amount2: '2.2',
-          amount3: 17
-        }, {
-          id: '12987126',
-          name: '王小虎',
-          amount1: '539',
-          amount2: '4.1',
-          amount3: 15
-        }]
-      };
+        tableData: [
+          {
+            id: '12987122',
+            name: '王小虎',
+            amount1: '234',
+            amount2: '3.2',
+            amount3: 10,
+          },
+          {
+            id: '12987123',
+            name: '王小虎',
+            amount1: '165',
+            amount2: '4.43',
+            amount3: 12,
+          },
+          {
+            id: '12987124',
+            name: '王小虎',
+            amount1: '324',
+            amount2: '1.9',
+            amount3: 9,
+          },
+          {
+            id: '12987125',
+            name: '王小虎',
+            amount1: '621',
+            amount2: '2.2',
+            amount3: 17,
+          },
+          {
+            id: '12987126',
+            name: '王小虎',
+            amount1: '539',
+            amount2: '4.1',
+            amount3: 15,
+          },
+        ],
+      }
     },
     methods: {
       arraySpanMethod({ row, column, rowIndex, columnIndex }) {
         if (rowIndex % 2 === 0) {
           if (columnIndex === 0) {
-            return [1, 2];
+            return [1, 2]
           } else if (columnIndex === 1) {
-            return [0, 0];
+            return [0, 0]
           }
         }
       },
@@ -1756,20 +1597,21 @@
           if (rowIndex % 2 === 0) {
             return {
               rowspan: 2,
-              colspan: 1
-            };
+              colspan: 1,
+            }
           } else {
             return {
               rowspan: 0,
-              colspan: 0
-            };
+              colspan: 0,
+            }
           }
         }
-      }
-    }
-  };
+      },
+    },
+  }
 </script>
 ```
+
 :::
 
 ### 自定义索引
@@ -1779,27 +1621,11 @@
 
 ```html
 <template>
-  <el-table
-    :data="tableData"
-    style="width: 100%">
-    <el-table-column
-      type="index"
-      :index="indexMethod">
-    </el-table-column>
-    <el-table-column
-      prop="date"
-      label="日期"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="name"
-      label="姓名"
-      width="180">
-    </el-table-column>
-    <el-table-column
-      prop="address"
-      label="地址">
-    </el-table-column>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column type="index" :index="indexMethod"> </el-table-column>
+    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+    <el-table-column prop="address" label="地址"> </el-table-column>
   </el-table>
 </template>
 
@@ -1807,161 +1633,173 @@
   export default {
     data() {
       return {
-        tableData: [{
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-          tag: '家'
-        }, {
-          date: '2016-05-04',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1517 弄',
-          zip: 200333,
-          tag: '公司'
-        }, {
-          date: '2016-05-01',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1519 弄',
-          zip: 200333,
-          tag: '家'
-        }, {
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1516 弄',
-          zip: 200333,
-          tag: '公司'
-        }],
+        tableData: [
+          {
+            date: '2016-05-02',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333,
+            tag: '家',
+          },
+          {
+            date: '2016-05-04',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1517 弄',
+            zip: 200333,
+            tag: '公司',
+          },
+          {
+            date: '2016-05-01',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1519 弄',
+            zip: 200333,
+            tag: '家',
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1516 弄',
+            zip: 200333,
+            tag: '公司',
+          },
+        ],
       }
     },
     methods: {
       indexMethod(index) {
-        return index * 2;
-      }
-    }
-  };
+        return index * 2
+      },
+    },
+  }
 </script>
 ```
+
 :::
 
 ### Table Attributes
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| data | 显示的数据 | array | — | — |
-| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。  | string / number | — | — |
-| max-height | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string / number | — | — |
-| stripe | 是否为斑马纹 table | boolean | — | false |
-| border | 是否带有纵向边框 | boolean | — | false |
-| size | Table 的尺寸 | string | medium / small / mini | — |
-| fit | 列的宽度是否自撑开 | boolean | — | true |
-| show-header | 是否显示表头 | boolean | — | true |
-| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
-| current-row-key | 当前行的 key，只写属性 | string / number | — | — |
-| 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, 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 | — | — |
-| 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 | 空数据时显示的文本内容，也可以通过 `#empty` 设置 | string | — | 暂无数据 |
-| default-expand-all | 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 | 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 |
-| show-summary | 是否在表尾显示合计行 | boolean | — | false |
-| sum-text | 合计行第一列的文本 | string | — | 合计 |
-| summary-method | 自定义的合计计算方法 | function({ columns, data }) | — | — |
-| span-method | 合并行或列的计算方法 | function({ row, column, rowIndex, columnIndex }) | — | — |
-| select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | boolean | — | true |
-| indent      | 展示树形数据时，树节点的缩进 | number | — | 16 |
-| lazy        | 是否懒加载子节点数据 | boolean | — | — |
-| load        | 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 | function(row, treeNode, resolve) | — | — |
-| tree-props  | 渲染嵌套数据的配置选项 | object | — | { hasChildren: 'hasChildren', children: 'children' } |
+
+| 参数                    | 说明                                                                                                                                                                                                        | 类型                                                      | 可选值                          | 默认值                                                        |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------- |
+| data                    | 显示的数据                                                                                                                                                                                                  | array                                                     | —                               | —                                                             |
+| height                  | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。                                | string / number                                           | —                               | —                                                             |
+| max-height              | Table 的最大高度。合法的值为数字或者单位为 px 的高度。                                                                                                                                                      | string / number                                           | —                               | —                                                             |
+| stripe                  | 是否为斑马纹 table                                                                                                                                                                                          | boolean                                                   | —                               | false                                                         |
+| border                  | 是否带有纵向边框                                                                                                                                                                                            | boolean                                                   | —                               | false                                                         |
+| size                    | Table 的尺寸                                                                                                                                                                                                | string                                                    | medium / small / mini           | —                                                             |
+| fit                     | 列的宽度是否自撑开                                                                                                                                                                                          | boolean                                                   | —                               | true                                                          |
+| show-header             | 是否显示表头                                                                                                                                                                                                | boolean                                                   | —                               | true                                                          |
+| highlight-current-row   | 是否要高亮当前行                                                                                                                                                                                            | boolean                                                   | —                               | false                                                         |
+| current-row-key         | 当前行的 key，只写属性                                                                                                                                                                                      | string / number                                           | —                               | —                                                             |
+| 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, 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 | —                               | —                                                             |
+| 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              | 空数据时显示的文本内容，也可以通过 `#empty` 设置                                                                                                                                                            | string                                                    | —                               | 暂无数据                                                      |
+| default-expand-all      | 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效                                                                                                                                             | 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                                                          |
+| show-summary            | 是否在表尾显示合计行                                                                                                                                                                                        | boolean                                                   | —                               | false                                                         |
+| sum-text                | 合计行第一列的文本                                                                                                                                                                                          | string                                                    | —                               | 合计                                                          |
+| summary-method          | 自定义的合计计算方法                                                                                                                                                                                        | function({ columns, data })                               | —                               | —                                                             |
+| span-method             | 合并行或列的计算方法                                                                                                                                                                                        | function({ row, column, rowIndex, columnIndex })          | —                               | —                                                             |
+| select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行                                                                                         | boolean                                                   | —                               | true                                                          |
+| indent                  | 展示树形数据时，树节点的缩进                                                                                                                                                                                | number                                                    | —                               | 16                                                            |
+| lazy                    | 是否懒加载子节点数据                                                                                                                                                                                        | boolean                                                   | —                               | —                                                             |
+| load                    | 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息                                                                                                                               | function(row, treeNode, resolve)                          | —                               | —                                                             |
+| tree-props              | 渲染嵌套数据的配置选项                                                                                                                                                                                      | object                                                    | —                               | { hasChildren: 'hasChildren', children: 'children' }          |
 
 ### Table Events
-| 事件名 | 说明 | 参数 |
-| ---- | ---- | ---- |
-| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
-| select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
-| selection-change | 当选择项发生变化时会触发该事件 | selection |
-| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
-| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
-| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
-| cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event |
-| cell-contextmenu | 当某个单元格被鼠标右键点击时会触发该事件 | row, column, cell, event |
-| row-click | 当某一行被点击时会触发该事件 | row, column, event |
-| row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, column, event |
-| row-dblclick | 当某一行被双击时会触发该事件 | row, column, event |
-| header-click | 当某一列的表头被点击时会触发该事件 | column, event |
-| header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件 | column, event |
-| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
-| filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
-| current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
-| header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
-| expand-change  | 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） | row, (expandedRows \| expanded) |
+
+| 事件名             | 说明                                                                                                                                         | 参数                              |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| select             | 当用户手动勾选数据行的 Checkbox 时触发的事件                                                                                                 | selection, row                    |
+| select-all         | 当用户手动勾选全选 Checkbox 时触发的事件                                                                                                     | selection                         |
+| selection-change   | 当选择项发生变化时会触发该事件                                                                                                               | selection                         |
+| cell-mouse-enter   | 当单元格 hover 进入时会触发该事件                                                                                                            | row, column, cell, event          |
+| cell-mouse-leave   | 当单元格 hover 退出时会触发该事件                                                                                                            | row, column, cell, event          |
+| cell-click         | 当某个单元格被点击时会触发该事件                                                                                                             | row, column, cell, event          |
+| cell-dblclick      | 当某个单元格被双击击时会触发该事件                                                                                                           | row, column, cell, event          |
+| cell-contextmenu   | 当某个单元格被鼠标右键点击时会触发该事件                                                                                                     | row, column, cell, event          |
+| row-click          | 当某一行被点击时会触发该事件                                                                                                                 | row, column, event                |
+| row-contextmenu    | 当某一行被鼠标右键点击时会触发该事件                                                                                                         | row, column, event                |
+| row-dblclick       | 当某一行被双击时会触发该事件                                                                                                                 | row, column, event                |
+| header-click       | 当某一列的表头被点击时会触发该事件                                                                                                           | column, event                     |
+| header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件                                                                                                     | column, event                     |
+| sort-change        | 当表格的排序条件发生变化的时候会触发该事件                                                                                                   | { column, prop, order }           |
+| filter-change      | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters                           |
+| current-change     | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性                                          | currentRow, oldCurrentRow         |
+| header-dragend     | 当拖动表头改变了列的宽度的时候会触发该事件                                                                                                   | newWidth, oldWidth, column, event |
+| expand-change      | 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）                     | row, (expandedRows \| expanded)   |
 
 ### Table Methods
-| 方法名 | 说明 | 参数 |
-| ---- | ---- | ---- |
-| clearSelection | 用于多选表格，清空用户的选择 | — |
-| toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
-| toggleAllSelection | 用于多选表格，切换全选和全不选 | — |
-| toggleRowExpansion | 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |
-| setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |
-| clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |
-| clearFilter | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey |
-| doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | — |
-| sort | 手动对 Table 进行排序。参数 `prop` 属性指定排序列，`order` 指定排序顺序。 | prop: string, order: string |
+
+| 方法名             | 说明                                                                                                                    | 参数                        |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| clearSelection     | 用于多选表格，清空用户的选择                                                                                            | —                           |
+| toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）             | row, selected               |
+| toggleAllSelection | 用于多选表格，切换全选和全不选                                                                                          | —                           |
+| toggleRowExpansion | 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded               |
+| setCurrentRow      | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。                                    | row                         |
+| clearSort          | 用于清空排序条件，数据会恢复成未排序的状态                                                                              | —                           |
+| clearFilter        | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由 columnKey 组成的数组以清除指定列的过滤条件       | columnKey                   |
+| doLayout           | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法                                      | —                           |
+| sort               | 手动对 Table 进行排序。参数 `prop` 属性指定排序列，`order` 指定排序顺序。                                               | prop: string, order: string |
 
 ### Table Slot
-| name | 说明 |
-|------|--------|
+
+| name   | 说明                                                                                                                                  |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------- |
 | append | 插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。 |
 
 ### Table-column Attributes
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | 对应列的类型。如果设置了 `selection` 则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 `expand` 则显示为一个可展开的按钮 | string | selection / index / expand | — |
-| index | 如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引 | number / function(index) | — | — |
-| column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | — | — |
-| label | 显示的标题 | string | — | — |
-| prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
-| width | 对应列的宽度 | string / number | — | — |
-| min-width | 对应列的最小宽度，与 `width` 的区别是 `width` 是固定的，`min-width` 会把剩余宽度按比例分配给设置了 `min-width` 的列 | string / number | — | — |
-| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true / 'left' / 'right' | — |
-| render-header | 列标题 Label 区域渲染使用的 Function | function({ column, $index }) | — | — |
-| sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean / string | true / false / 'custom' | false |
-| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | function(a, b) | — | — |
-| sort-by | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | string / array / function(row, index) | — | — |
-| sort-orders | 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 | array | 数组中的元素需为以下三者之一：`ascending` 表示升序，`descending` 表示降序，`null` 表示还原为原始顺序 | ['ascending', 'descending', null] |
-| resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
-| formatter | 用来格式化内容 | function(row, column, cellValue, index) | — | — |
-| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | boolean | — | false |
-| align | 对齐方式 | string | left / center / right | left |
-| header-align | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | string | left / center / right | — |
-| class-name | 列的 className | string | — | — |
-| label-class-name | 当前列标题的自定义类名 | string | — | — |
-| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | function(row, index) | — | — |
-| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 `row-key`） | boolean | — | false |
-| filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | array[{ text, value }] | — | — |
-| filter-placement | 过滤弹出框的定位 | string | 与 Tooltip 的 `placement` 属性相同 | — |
-| filter-multiple | 数据过滤的选项是否多选 | boolean | — | true |
-| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | function(value, row, column) | — | — |
-| filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | array | — | — |
+
+| 参数                  | 说明                                                                                                                                                                                  | 类型                                    | 可选值                                                                                               | 默认值                            |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------- |
+| type                  | 对应列的类型。如果设置了 `selection` 则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 `expand` 则显示为一个可展开的按钮                                 | string                                  | selection / index / expand                                                                           | —                                 |
+| index                 | 如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引                                                                                                                        | number / function(index)                | —                                                                                                    | —                                 |
+| column-key            | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件                                                                                              | string                                  | —                                                                                                    | —                                 |
+| label                 | 显示的标题                                                                                                                                                                            | string                                  | —                                                                                                    | —                                 |
+| prop                  | 对应列内容的字段名，也可以使用 property 属性                                                                                                                                          | string                                  | —                                                                                                    | —                                 |
+| width                 | 对应列的宽度                                                                                                                                                                          | string / number                         | —                                                                                                    | —                                 |
+| min-width             | 对应列的最小宽度，与 `width` 的区别是 `width` 是固定的，`min-width` 会把剩余宽度按比例分配给设置了 `min-width` 的列                                                                   | string / number                         | —                                                                                                    | —                                 |
+| fixed                 | 列是否固定在左侧或者右侧，true 表示固定在左侧                                                                                                                                         | string, boolean                         | true / 'left' / 'right'                                                                              | —                                 |
+| render-header         | 列标题 Label 区域渲染使用的 Function                                                                                                                                                  | function({ column, \$index })           | —                                                                                                    | —                                 |
+| sortable              | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件                                                                                   | boolean / string                        | true / false / 'custom'                                                                              | false                             |
+| sort-method           | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致                                                                          | function(a, b)                          | —                                                                                                    | —                                 |
+| sort-by               | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | string / array / function(row, index)   | —                                                                                                    | —                                 |
+| sort-orders           | 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序                                            | array                                   | 数组中的元素需为以下三者之一：`ascending` 表示升序，`descending` 表示降序，`null` 表示还原为原始顺序 | ['ascending', 'descending', null] |
+| resizable             | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）                                                                                                              | boolean                                 | —                                                                                                    | true                              |
+| formatter             | 用来格式化内容                                                                                                                                                                        | function(row, column, cellValue, index) | —                                                                                                    | —                                 |
+| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip                                                                                                                                                        | boolean                                 | —                                                                                                    | false                             |
+| align                 | 对齐方式                                                                                                                                                                              | string                                  | left / center / right                                                                                | left                              |
+| header-align          | 表头对齐方式，若不设置该项，则使用表格的对齐方式                                                                                                                                      | string                                  | left / center / right                                                                                | —                                 |
+| class-name            | 列的 className                                                                                                                                                                        | string                                  | —                                                                                                    | —                                 |
+| label-class-name      | 当前列标题的自定义类名                                                                                                                                                                | string                                  | —                                                                                                    | —                                 |
+| selectable            | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选                                                                                | function(row, index)                    | —                                                                                                    | —                                 |
+| reserve-selection     | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 `row-key`）                                                                        | boolean                                 | —                                                                                                    | false                             |
+| filters               | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。                                                                                                                     | array[{ text, value }]                  | —                                                                                                    | —                                 |
+| filter-placement      | 过滤弹出框的定位                                                                                                                                                                      | string                                  | 与 Tooltip 的 `placement` 属性相同                                                                   | —                                 |
+| filter-multiple       | 数据过滤的选项是否多选                                                                                                                                                                | boolean                                 | —                                                                                                    | true                              |
+| filter-method         | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。                                                                                          | function(value, row, column)            | —                                                                                                    | —                                 |
+| filtered-value        | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。                                                                                                                | array                                   | —                                                                                                    | —                                 |
 
 ### Table-column Slot
-| name | 说明 |
-|------|--------|
-| — | 自定义列的内容，参数为 { row, column, $index } |
-| header | 自定义表头的内容. 参数为 { column, $index } |
+
+| name   | 说明                                            |
+| ------ | ----------------------------------------------- |
+| —      | 自定义列的内容，参数为 { row, column, \$index } |
+| header | 自定义表头的内容. 参数为 { column, \$index }    |