From 2bc16a2bab6484af88842e464f0cd89160149bed Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Thu, 19 Aug 2021 13:55:20 +0800
Subject: [PATCH] docs(descriptions): update doc about details of no border
 (#2984)

* docs(descriptions): update doc about details of no border

re #2970

* docs: update
---
 website/docs/en-US/descriptions.md | 24 ++++++++---------
 website/docs/es/descriptions.md    | 41 +++++++++++++++++++++---------
 website/docs/fr-FR/descriptions.md | 41 +++++++++++++++++++++---------
 website/docs/jp/descriptions.md    | 41 +++++++++++++++++++++---------
 website/docs/zh-CN/descriptions.md | 24 ++++++++---------
 5 files changed, 111 insertions(+), 60 deletions(-)

diff --git a/website/docs/en-US/descriptions.md b/website/docs/en-US/descriptions.md
index d7888b21b6..4975ce93eb 100644
--- a/website/docs/en-US/descriptions.md
+++ b/website/docs/en-US/descriptions.md
@@ -8,13 +8,13 @@ Display multiple fields in list form.
 
 ```html
 <el-descriptions title="User Info">
-    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
-    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
-    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
-    <el-descriptions-item label="Remarks">
-      <el-tag size="small">School</el-tag>
-    </el-descriptions-item>
-    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
 </el-descriptions>
 ```
 :::
@@ -89,7 +89,7 @@ Display multiple fields in list form.
 
 <script>
   export default {
-    data () {
+    data() {
       return {
         size: ''
       };
@@ -165,10 +165,10 @@ Display multiple fields in list form.
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | label          | label text         | string  |          —             |    —     |
 | span          | colspan of column       | number  |          —             |    1     |
-| width          | column width, the width of the same column in different rows is set by the max value         | 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  |          —             |    —     |
-| align          | column content alignment         | string  |          left / center / right             |    left     |
-| label-align          | column label alignment, if omitted, the value of the above `align` attribute will be applied         | string  |          left / center / right             |    —     |
+| width          | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)         | 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 (If no`border`, width contains label and content)         | string / number  |          —             |    —     |
+| align          | column content alignment (If no `border`, effective for both label and content)         | string  |          left / center / right             |    left     |
+| label-align          | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)         | string  |          left / center / right             |    —     |
 | class-name          | column content custom class name         | string  |          —             |    —     |
 | label-class-name          | column label custom class name         | string  |          —             |    —     |
 
diff --git a/website/docs/es/descriptions.md b/website/docs/es/descriptions.md
index 34ed3a7b06..4975ce93eb 100644
--- a/website/docs/es/descriptions.md
+++ b/website/docs/es/descriptions.md
@@ -8,13 +8,13 @@ Display multiple fields in list form.
 
 ```html
 <el-descriptions title="User Info">
-    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
-    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
-    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
-    <el-descriptions-item label="Remarks">
-      <el-tag size="small">School</el-tag>
-    </el-descriptions-item>
-    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
 </el-descriptions>
 ```
 :::
@@ -89,7 +89,7 @@ Display multiple fields in list form.
 
 <script>
   export default {
-    data () {
+    data() {
       return {
         size: ''
       };
@@ -126,6 +126,23 @@ Display multiple fields in list form.
 ```
 :::
 
+### Customized Style
+
+:::demo
+
+```html
+<el-descriptions title="Customized style list" :column="3" border>
+  <el-descriptions-item label="Username" label-align="right" align="center" label-class-name="my-label" class-name="my-content" width="150px">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone" label-align="right" align="center">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" label-align="right" align="center">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks" label-align="right" align="center">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address" label-align="right" align="center">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+```
+:::
+
 ### Descriptions Attributes
 | Attribute     | Description       | Type       | Accepted Values        | Default   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
@@ -148,10 +165,10 @@ Display multiple fields in list form.
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | label          | label text         | string  |          —             |    —     |
 | span          | colspan of column       | number  |          —             |    1     |
-| width          | column width, the width of the same column in different rows is set by the max value         | 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  |          —             |    —     |
-| align          | column content alignment         | string  |          left / center / right             |    left     |
-| label-align          | column label alignment, if omitted, the value of the above `align` attribute will be applied         | string  |          left / center / right             |    —     |
+| width          | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)         | 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 (If no`border`, width contains label and content)         | string / number  |          —             |    —     |
+| align          | column content alignment (If no `border`, effective for both label and content)         | string  |          left / center / right             |    left     |
+| label-align          | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)         | string  |          left / center / right             |    —     |
 | class-name          | column content custom class name         | string  |          —             |    —     |
 | label-class-name          | column label custom class name         | string  |          —             |    —     |
 
diff --git a/website/docs/fr-FR/descriptions.md b/website/docs/fr-FR/descriptions.md
index 34ed3a7b06..4975ce93eb 100644
--- a/website/docs/fr-FR/descriptions.md
+++ b/website/docs/fr-FR/descriptions.md
@@ -8,13 +8,13 @@ Display multiple fields in list form.
 
 ```html
 <el-descriptions title="User Info">
-    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
-    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
-    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
-    <el-descriptions-item label="Remarks">
-      <el-tag size="small">School</el-tag>
-    </el-descriptions-item>
-    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
 </el-descriptions>
 ```
 :::
@@ -89,7 +89,7 @@ Display multiple fields in list form.
 
 <script>
   export default {
-    data () {
+    data() {
       return {
         size: ''
       };
@@ -126,6 +126,23 @@ Display multiple fields in list form.
 ```
 :::
 
+### Customized Style
+
+:::demo
+
+```html
+<el-descriptions title="Customized style list" :column="3" border>
+  <el-descriptions-item label="Username" label-align="right" align="center" label-class-name="my-label" class-name="my-content" width="150px">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone" label-align="right" align="center">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" label-align="right" align="center">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks" label-align="right" align="center">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address" label-align="right" align="center">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+```
+:::
+
 ### Descriptions Attributes
 | Attribute     | Description       | Type       | Accepted Values        | Default   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
@@ -148,10 +165,10 @@ Display multiple fields in list form.
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | label          | label text         | string  |          —             |    —     |
 | span          | colspan of column       | number  |          —             |    1     |
-| width          | column width, the width of the same column in different rows is set by the max value         | 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  |          —             |    —     |
-| align          | column content alignment         | string  |          left / center / right             |    left     |
-| label-align          | column label alignment, if omitted, the value of the above `align` attribute will be applied         | string  |          left / center / right             |    —     |
+| width          | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)         | 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 (If no`border`, width contains label and content)         | string / number  |          —             |    —     |
+| align          | column content alignment (If no `border`, effective for both label and content)         | string  |          left / center / right             |    left     |
+| label-align          | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)         | string  |          left / center / right             |    —     |
 | class-name          | column content custom class name         | string  |          —             |    —     |
 | label-class-name          | column label custom class name         | string  |          —             |    —     |
 
diff --git a/website/docs/jp/descriptions.md b/website/docs/jp/descriptions.md
index 34ed3a7b06..4975ce93eb 100644
--- a/website/docs/jp/descriptions.md
+++ b/website/docs/jp/descriptions.md
@@ -8,13 +8,13 @@ Display multiple fields in list form.
 
 ```html
 <el-descriptions title="User Info">
-    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
-    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
-    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
-    <el-descriptions-item label="Remarks">
-      <el-tag size="small">School</el-tag>
-    </el-descriptions-item>
-    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
 </el-descriptions>
 ```
 :::
@@ -89,7 +89,7 @@ Display multiple fields in list form.
 
 <script>
   export default {
-    data () {
+    data() {
       return {
         size: ''
       };
@@ -126,6 +126,23 @@ Display multiple fields in list form.
 ```
 :::
 
+### Customized Style
+
+:::demo
+
+```html
+<el-descriptions title="Customized style list" :column="3" border>
+  <el-descriptions-item label="Username" label-align="right" align="center" label-class-name="my-label" class-name="my-content" width="150px">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone" label-align="right" align="center">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" label-align="right" align="center">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks" label-align="right" align="center">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address" label-align="right" align="center">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+```
+:::
+
 ### Descriptions Attributes
 | Attribute     | Description       | Type       | Accepted Values        | Default   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
@@ -148,10 +165,10 @@ Display multiple fields in list form.
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | label          | label text         | string  |          —             |    —     |
 | span          | colspan of column       | number  |          —             |    1     |
-| width          | column width, the width of the same column in different rows is set by the max value         | 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  |          —             |    —     |
-| align          | column content alignment         | string  |          left / center / right             |    left     |
-| label-align          | column label alignment, if omitted, the value of the above `align` attribute will be applied         | string  |          left / center / right             |    —     |
+| width          | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)         | 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 (If no`border`, width contains label and content)         | string / number  |          —             |    —     |
+| align          | column content alignment (If no `border`, effective for both label and content)         | string  |          left / center / right             |    left     |
+| label-align          | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)         | string  |          left / center / right             |    —     |
 | class-name          | column content custom class name         | string  |          —             |    —     |
 | label-class-name          | column label custom class name         | string  |          —             |    —     |
 
diff --git a/website/docs/zh-CN/descriptions.md b/website/docs/zh-CN/descriptions.md
index d6aa5e1702..6fe3b9334c 100644
--- a/website/docs/zh-CN/descriptions.md
+++ b/website/docs/zh-CN/descriptions.md
@@ -8,13 +8,13 @@
 
 ```html
 <el-descriptions title="用户信息">
-    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
-    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
-    <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
-    <el-descriptions-item label="备注">
-      <el-tag size="small">学校</el-tag>
-    </el-descriptions-item>
-    <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
+  <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+  <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
+  <el-descriptions-item label="备注">
+    <el-tag size="small">学校</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
 </el-descriptions>
 ```
 :::
@@ -89,7 +89,7 @@
 
 <script>
   export default {
-    data () {
+    data() {
       return {
         size: ''
       };
@@ -165,10 +165,10 @@
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | label          | 标签文本         | string  |          —             |    —     |
 | span          | 列的数量         | number  |          —             |    1     |
-| width          | 列的宽度，不同行相同列的宽度按最大值设定         | string / number  |          —             |    —     |
-| min-width          | 列的最小宽度，与 `width` 的区别是 `width` 是固定的，`min-width` 会把剩余宽度按比例分配给设置了 `min-width` 的列         | string / number  |          —             |    —     |
-| align          | 列的内容对齐方式         | string  |          left / center / right             |    left     |
-| label-align          | 列的标签对齐方式，若不设置该项，则使用内容的对齐方式         | string  |          left / center / right             |    —     |
+| width          | 列的宽度，不同行相同列的宽度按最大值设定（如无 `border` ，宽度包含标签与内容）         | string / number  |          —             |    —     |
+| min-width          | 列的最小宽度，与 `width` 的区别是 `width` 是固定的，`min-width` 会把剩余宽度按比例分配给设置了 `min-width` 的列（如无 `border`，宽度包含标签与内容）         | string / number  |          —             |    —     |
+| align          | 列的内容对齐方式（如无 `border`，对标签和内容均生效）         | string  |          left / center / right             |    left     |
+| label-align          | 列的标签对齐方式，若不设置该项，则使用内容的对齐方式（如无 `border`，请使用 `align` 参数）         | string  |          left / center / right             |    —     |
 | class-name          | 列的内容自定义类名         | string  |          —             |    —     |
 | label-class-name          | 列的标签自定义类名         | string  |          —             |    —     |