Feat/descriptions (#1856)

* feat(descriptions): new component Descriptions

* feat: update

* feat: update

* feat: update

* feat: update

* fix: revert readme.md

* feat: update

* feat: update provide key

packages/descriptions-item/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import type { SFCWithInstall } from '@element-plus/utils/types'
+import DescriptionsItem from '../descriptions/src/description-item'
+
+DescriptionsItem.install = (app: App): void => {
+  app.component(DescriptionsItem.name, DescriptionsItem)
+}
+
+const _DescriptionsItem: SFCWithInstall<typeof DescriptionsItem> = DescriptionsItem
+
+export default _DescriptionsItem

packages/descriptions-item/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/descriptions-item",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.9"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}

packages/descriptions/__tests__/descriptions.spec.ts

@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils'
+import Descriptions from '../src/index.vue'
+import DescriptionsItem from '../src/description-item'
+import { nextTick } from 'vue'
+
+const _mount = (template: string, data?: () => void, methods?: any) =>
+  mount({
+    components: {
+      'el-descriptions': Descriptions,
+      'el-descriptions-item': DescriptionsItem,
+    },
+    template,
+    data,
+    methods,
+  })
+
+describe('Descriptions.vue', () => {
+  test('render test', () => {
+    const wrapper = _mount(`
+      <el-descriptions title="title" extra="extra">
+        <el-descriptions-item v-for="item in 4"></el-descriptions-item>
+      </el-descriptions>
+    `)
+
+    expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
+    expect(wrapper.find('.el-descriptions__extra').text()).toEqual('extra')
+    expect(wrapper.findAll('.el-descriptions__label').length).toEqual(4)
+  })
+
+  test('should render border props', () => {
+    const wrapper = _mount(`
+      <el-descriptions border>
+        <el-descriptions-item v-for="item in 3" :label="item">{{ item }}</el-descriptions-item>
+      </el-descriptions>
+    `)
+
+    expect(wrapper.find('table').classes()).toContain('is-bordered')
+  })
+
+  test('should render column props', async () => {
+    const wrapper = _mount(`
+      <el-descriptions :column="5" :border="border">
+        <el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
+      </el-descriptions>
+    `, () => {
+      return {
+        border: false,
+      }
+    })
+
+    expect(wrapper.find('tr').element.children.length).toEqual(5)
+    wrapper.vm.border = true
+    await nextTick()
+    expect(wrapper.find('tr').element.children.length).toEqual(10)
+  })
+
+  test('should render direction props', async () => {
+    const wrapper = _mount(`
+      <el-descriptions :column="5" :direction="direction" border>
+        <el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
+      </el-descriptions>
+    `, () => {
+      return {
+        direction: 'horizontal',
+      }
+    })
+
+    expect(wrapper.find('tr').element.children.length).toEqual(10)
+    expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(wrapper.findAll('tr')[0].element.children[1].innerHTML)
+    wrapper.vm.direction = 'vertical'
+    await nextTick()
+    expect(wrapper.find('tr').element.children.length).toEqual(5)
+    expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(wrapper.findAll('tr')[1].element.children[0].innerHTML)
+  })
+
+  test('should render title slots', async () => {
+    const wrapper = _mount(`
+      <el-descriptions>
+        <template #title>title</template>
+        <el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
+      </el-descriptions>
+    `)
+
+    expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
+  })
+
+  test('should render span props', async () => {
+    const wrapper = _mount(`
+      <el-descriptions :column="3">
+        <el-descriptions-item label="1">1</el-descriptions-item>
+        <el-descriptions-item label="2" :span="2">2</el-descriptions-item>
+        <el-descriptions-item label="3">3</el-descriptions-item>
+      </el-descriptions>
+    `)
+
+    expect(wrapper.findAll('td')[1].element.getAttribute('colSpan')).toEqual('2')
+  })
+})

packages/descriptions/index.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue'
+import type { SFCWithInstall } from '@element-plus/utils/types'
+import Descriptions from './src/index.vue'
+
+Descriptions.install = (app: App): void => {
+  app.component(Descriptions.name, Descriptions)
+}
+
+const _Descriptions: SFCWithInstall<typeof Descriptions> = Descriptions
+
+export default _Descriptions

packages/descriptions/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/descriptions",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.9"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.3"
+  }
+}

packages/descriptions/src/description-item.ts

@@ -0,0 +1,5 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ElDescriptionsItem',
+})

packages/descriptions/src/descriptions-cell.ts

@@ -0,0 +1,55 @@
+import { computed, defineComponent, h, inject } from 'vue'
+import { elDescriptionsKey, IDescriptionsInject } from './descriptions.type'
+
+export default defineComponent({
+  name: 'ElDescriptionsCell',
+  props: {
+    cell: {
+      type: Object,
+    },
+    tag: {
+      type: String,
+    },
+    type: {
+      type: String,
+    },
+  },
+  setup(props) {
+    const descriptions = inject(elDescriptionsKey, {} as IDescriptionsInject)
+
+    const label = computed(() => props.cell?.children?.label?.() || props.cell?.props?.label)
+    const content = computed(() => props.cell?.children?.default?.())
+    const span = computed(() => props.cell?.props?.span || 1)
+
+    return {
+      descriptions,
+      label: label,
+      content: content,
+      span: span,
+    }
+  },
+  render() {
+    switch (this.type) {
+      case 'label':
+        return h(this.tag, {
+          class: ['el-descriptions__label', { 'is-bordered-label': this.descriptions.border }],
+          colSpan: this.descriptions.direction === 'vertical' ? this.span : 1,
+        }, this.label)
+      case 'content':
+        return h(this.tag, {
+          class: 'el-descriptions__content',
+          colSpan: this.descriptions.direction === 'vertical' ? this.span : this.span * 2 - 1,
+        }, this.content)
+      default:
+        return h('td', {
+          colSpan: this.span,
+        }, [
+          h('span', {
+            class: ['el-descriptions__label', { 'is-bordered-label': this.descriptions.border }],
+          }, this.label),
+          h('span', {
+            class: 'el-descriptions__content',
+          }, this.content)])
+    }
+  },
+})

packages/descriptions/src/descriptions-row.vue

@@ -0,0 +1,53 @@
+<template>
+  <template v-if="descriptions.direction === 'vertical'">
+    <tr>
+      <template v-for="(cell, index) in row" :key="`tr1-${index}`">
+        <el-descriptions-cell :cell="cell" tag="th" type="label" />
+      </template>
+    </tr>
+    <tr>
+      <template v-for="(cell, index) in row" :key="`tr2-${index}`">
+        <el-descriptions-cell :cell="cell" tag="td" type="content" />
+      </template>
+    </tr>
+  </template>
+  <tr v-else>
+    <template v-for="(cell, index) in row" :key="`tr3-${index}`">
+      <template v-if="descriptions.border">
+        <el-descriptions-cell :cell="cell" tag="td" type="label" />
+        <el-descriptions-cell :cell="cell" tag="td" type="content" />
+      </template>
+      <el-descriptions-cell
+        v-else
+        :cell="cell"
+        tag="td"
+        type="both"
+      />
+    </template>
+  </tr>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject } from 'vue'
+import DescriptionsCell from './descriptions-cell'
+import { elDescriptionsKey, IDescriptionsInject } from './descriptions.type'
+
+export default defineComponent({
+  name: 'ElDescriptionsRow',
+  components: {
+    [DescriptionsCell.name]: DescriptionsCell,
+  },
+  props: {
+    row: {
+      type: Array,
+    },
+  },
+  setup() {
+    const descriptions = inject(elDescriptionsKey, {} as IDescriptionsInject)
+
+    return {
+      descriptions,
+    }
+  },
+})
+</script>

packages/descriptions/src/descriptions.type.ts

@@ -0,0 +1,17 @@
+import { InjectionKey, PropType } from 'vue'
+
+interface IDescriptionsInject {
+  border: boolean
+  column: number
+  direction: PropType<'horizontal' | 'vertical'>
+  size: PropType<ComponentSize>
+  title: string
+  extra: string
+}
+
+const elDescriptionsKey: InjectionKey<IDescriptionsInject> = 'elDescriptions' as any
+
+export {
+  IDescriptionsInject,
+  elDescriptionsKey,
+}

packages/descriptions/src/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="el-descriptions">
+    <div v-if="title || extra || $slots.title || $slots.extra" class="el-descriptions__header">
+      <div class="el-descriptions__title">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div class="el-descriptions__extra">
+        <slot name="extra">{{ extra }}</slot>
+      </div>
+    </div>
+
+    <div class="el-descriptions__body">
+      <table :class="[{'is-bordered': border}, descriptionsSize ? `el-descriptions--${descriptionsSize}` : '']">
+        <tbody>
+          <template v-for="(row, index) in rows" :key="index">
+            <el-descriptions-row :row="row" />
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, provide } from 'vue'
+import { isValidComponentSize } from '@element-plus/utils/validators'
+import DescriptionsItem from '@element-plus/descriptions-item'
+import DescriptionsRow from './descriptions-row.vue'
+import { useGlobalConfig } from '@element-plus/utils/util'
+import { elDescriptionsKey } from './descriptions.type'
+
+export default defineComponent({
+  name: 'ElDescriptions',
+  components: {
+    [DescriptionsItem.name]: DescriptionsItem,
+    [DescriptionsRow.name]: DescriptionsRow,
+  },
+  props: {
+    border: {
+      type: Boolean,
+      default: false,
+    },
+    column: {
+      type: Number,
+      default: 3,
+    },
+    direction: {
+      type: String as PropType<'horizontal' | 'vertical'>,
+      default: 'horizontal',
+    },
+    size: {
+      type: String as PropType<ComponentSize>,
+      validator: isValidComponentSize,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    extra: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { slots }) {
+    provide(elDescriptionsKey, props)
+
+    const $ELEMENT = useGlobalConfig()
+    const descriptionsSize = computed(() => {
+      return props.size || $ELEMENT.size
+    })
+
+    const flattedChildren = children => {
+      const temp = Array.isArray(children) ? children : [children]
+      const res = []
+      temp.forEach(child => {
+        if (Array.isArray(child.children)) {
+          res.push(...flattedChildren(child.children))
+        } else {
+          res.push(child)
+        }
+      })
+      return res
+    }
+
+    const filledNode = (node, span, count, isLast = false) => {
+      if (!node.props) {
+        node.props = {}
+      }
+      if (span > count) {
+        node.props.span = count
+      }
+      if (isLast) {
+        // set the max span, cause of the last td
+        node.props.span = props.column
+      }
+      return node
+    }
+
+    const rows = computed(() => {
+      const children = flattedChildren(slots.default?.()).filter(node => node?.type?.name === 'ElDescriptionsItem')
+      const rows = []
+      let temp = []
+      let count = props.column
+
+      children.forEach((node, index) => {
+        const span = node.props?.span || 1
+
+        if (index === children.length - 1) {
+          temp.push(filledNode(node, span, count, true))
+          rows.push(temp)
+          return
+        }
+
+        if (span < count) {
+          count -= span
+          temp.push(node)
+        } else {
+          temp.push(filledNode(node, span, count))
+          rows.push(temp)
+          count = props.column
+          temp = []
+        }
+      })
+
+      return rows
+    })
+
+    return {
+      descriptionsSize,
+      rows,
+    }
+  },
+})
+</script>

packages/element-plus/index.ts

@@ -89,6 +89,8 @@ import ElSpace from '@element-plus/space'
 import ElSkeleton from '@element-plus/skeleton'
 import ElSkeletonItem from '@element-plus/skeleton-item'
 import ElCheckTag from '@element-plus/check-tag'
+import ElDescriptions from '@element-plus/descriptions'
+import ElDescriptionsItem from '@element-plus/descriptions-item'
 import ElResult from '@element-plus/result'
 
 import { use, i18n } from '@element-plus/locale'
@@ -208,6 +210,8 @@ const components = [
   ElSpace,
   ElSkeleton,
   ElSkeletonItem,
+  ElDescriptions,
+  ElDescriptionsItem,
   ElResult,
 ]
 
@@ -328,6 +332,8 @@ export {
   ElSpace,
   ElSkeleton,
   ElSkeletonItem,
+  ElDescriptions,
+  ElDescriptionsItem,
   ElResult,
   version,
   install,

packages/theme-chalk/src/common/var.scss

@@ -984,6 +984,13 @@ $--empty-image-width: 160px !default;
 $--empty-description-margin-top: 20px !default;
 $--empty-bottom-margin-top: 20px !default;
 
+/* Descriptions
+-------------------------- */
+$--descriptions-header-margin-bottom: 20px !default;
+$--descriptions-title-font-size: 16px !default;
+$--descriptions-table-border: 1px solid $--border-color-lighter !default;
+$--descriptions-item-bordered-label-background: #fafafa !default;
+
 /* Result
 -------------------------- */
 $--result-padding: 40px 30px !default;

packages/theme-chalk/src/descriptions-item.scss

@@ -0,0 +1,20 @@
+@import 'mixins/mixins';
+@import 'common/var';
+
+@include b(descriptions) {
+  @include e(label) {
+    &.is-bordered-label {
+      font-weight: bold;
+      color: $--color-text-secondary;
+      background: $--descriptions-item-bordered-label-background;
+    }
+
+    &:not(.is-bordered-label) {
+      margin-right: 10px;
+    }
+  }
+
+  @include e(content) {
+
+  }
+}

packages/theme-chalk/src/descriptions.scss

@@ -0,0 +1,96 @@
+@import 'mixins/mixins';
+@import 'common/var';
+@import 'descriptions-item';
+
+@include b(descriptions) {
+  box-sizing: border-box;
+  font-size: $--font-size-base;
+  color: $--color-text-primary;
+
+  @include e(header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: $--descriptions-header-margin-bottom;
+
+    @include e(title) {
+      font-size: $--descriptions-title-font-size;
+      font-weight: bold;
+    }
+  }
+
+  @include e(body) {
+    color: $--color-text-regular;
+    background-color: $--color-white;
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+
+      th, td {
+        text-align: left;
+        font-weight: normal;
+        line-height: 1.5;
+      }
+    }
+  }
+
+  .is-bordered {
+    th, td {
+      border: $--descriptions-table-border;
+      padding: 12px 10px;
+    }
+  }
+
+  :not(.is-bordered) {
+    th, td {
+      padding-bottom: 12px;
+    }
+  }
+
+  @include m(medium) {
+    &.is-bordered {
+      th, td {
+        padding: 10px;
+      }
+    }
+
+    &:not(.is-bordered) {
+      th, td {
+        padding-bottom: 10px;
+      }
+    }
+  }
+
+  @include m(small) {
+    font-size: 12px;
+
+    &.is-bordered {
+      th, td {
+        padding: 8px 10px;
+      }
+    }
+
+    &:not(.is-bordered) {
+      th, td {
+        padding-bottom: 8px;
+      }
+    }
+  }
+
+  @include m(mini) {
+    font-size: 12px;
+
+    &.is-bordered {
+      th, td {
+        padding: 6px 10px;
+      }
+    }
+
+    &:not(.is-bordered) {
+      th, td {
+        padding-bottom: 6px;
+      }
+    }
+  }
+}

packages/theme-chalk/src/index.scss

@@ -87,4 +87,6 @@
 @import "./empty.scss";
 @import "./affix.scss";
 @import "./check-tag.scss";
+@import "./descriptions";
+@import "./descriptions-item";
 @import "./result.scss";

website/demo-styles/descriptions.scss

@@ -0,0 +1,5 @@
+.demo-block.demo-descriptions {
+  .margin-top {
+    margin-top: 20px;
+  }
+}

website/demo-styles/index.scss

@@ -49,3 +49,4 @@
 @import "./drawer.scss";
 @import "./skeleton.scss";
 @import "./space.scss";
+@import "./descriptions.scss";

website/docs/en-US/descriptions.md

@@ -0,0 +1,156 @@
+## Descriptions
+
+Display multiple fields in list form.
+
+### Basic usage
+
+:::demo
+
+```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>
+```
+:::
+
+### Sizes
+
+:::demo
+
+```html
+<template>
+  <el-radio-group v-model="size">
+    <el-radio label="">Default</el-radio>
+    <el-radio label="medium">Medium</el-radio>
+    <el-radio label="small">Small</el-radio>
+    <el-radio label="mini">Mini</el-radio>
+  </el-radio-group>
+
+  <el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
+    <template #extra>
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-user"></i>
+        Username
+      </template>
+      kooriookami
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-mobile-phone"></i>
+        Telephone
+      </template>
+      18100000000
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-location-outline"></i>
+        Place
+      </template>
+      Suzhou
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-tickets"></i>
+        Remarks
+      </template>
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-office-building"></i>
+        Address
+      </template>
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
+  </el-descriptions>
+
+  <el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
+    <template #extra>
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <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>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        size: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Vertical List
+
+:::demo
+
+```html
+<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">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>
+
+<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">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>
+```
+:::
+
+### Descriptions Attributes
+| Attribute     | Description       | Type       | Accepted Values        | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| border        | with or without border      | boolean  |          —             |    false     |
+| column        | numbers of `Descriptions Item` in one line  | number | — |    3  |
+| direction     | direction of list  | string | vertical / horizontal |    horizontal  |
+| size          | size of list    | string  |    medium / small / mini  |  — |
+| title         | title text, display on the top left    | string  |    —  |  — |
+| extra         | extra text, display on the top right    | string  |    —  |  — |
+
+### Descriptions Slots
+
+| Name | Description |
+|------|--------|
+| title | custom title, display on the top left  |
+| extra | custom extra area, display on the top right  |
+
+### Descriptions Item Attributes
+| Attribute       | Description        | Type       | Accepted Values       | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| label          | label text         | string  |          —             |    —     |
+| span          | colspan of column       | number  |          —             |    1     |
+
+### Descriptions Item Slots
+
+| Name | Description |
+|------|--------|
+| label | custom label  |

website/docs/es/descriptions.md

@@ -0,0 +1,156 @@
+## Descriptions
+
+Display multiple fields in list form.
+
+### Basic usage
+
+:::demo
+
+```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>
+```
+:::
+
+### Sizes
+
+:::demo
+
+```html
+<template>
+  <el-radio-group v-model="size">
+    <el-radio label="">Default</el-radio>
+    <el-radio label="medium">Medium</el-radio>
+    <el-radio label="small">Small</el-radio>
+    <el-radio label="mini">Mini</el-radio>
+  </el-radio-group>
+
+  <el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
+    <template #extra>
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-user"></i>
+        Username
+      </template>
+      kooriookami
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-mobile-phone"></i>
+        Telephone
+      </template>
+      18100000000
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-location-outline"></i>
+        Place
+      </template>
+      Suzhou
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-tickets"></i>
+        Remarks
+      </template>
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-office-building"></i>
+        Address
+      </template>
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
+  </el-descriptions>
+
+  <el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
+    <template #extra>
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <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>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        size: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Vertical List
+
+:::demo
+
+```html
+<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">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>
+
+<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">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>
+```
+:::
+
+### Descriptions Attributes
+| Attribute     | Description       | Type       | Accepted Values        | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| border        | with or without border      | boolean  |          —             |    false     |
+| column        | numbers of `Descriptions Item` in one line  | number | — |    3  |
+| direction     | direction of list  | string | vertical / horizontal |    horizontal  |
+| size          | size of list    | string  |    medium / small / mini  |  — |
+| title         | title text, display on the top left    | string  |    —  |  — |
+| extra         | extra text, display on the top right    | string  |    —  |  — |
+
+### Descriptions Slots
+
+| Name | Description |
+|------|--------|
+| title | custom title, display on the top left  |
+| extra | custom extra area, display on the top right  |
+
+### Descriptions Item Attributes
+| Attribute       | Description        | Type       | Accepted Values       | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| label          | label text         | string  |          —             |    —     |
+| span          | colspan of column       | number  |          —             |    1     |
+
+### Descriptions Item Slots
+
+| Name | Description |
+|------|--------|
+| label | custom label  |

website/docs/fr-FR/descriptions.md

@@ -0,0 +1,156 @@
+## Descriptions
+
+Display multiple fields in list form.
+
+### Basic usage
+
+:::demo
+
+```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>
+```
+:::
+
+### Sizes
+
+:::demo
+
+```html
+<template>
+  <el-radio-group v-model="size">
+    <el-radio label="">Default</el-radio>
+    <el-radio label="medium">Medium</el-radio>
+    <el-radio label="small">Small</el-radio>
+    <el-radio label="mini">Mini</el-radio>
+  </el-radio-group>
+
+  <el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
+    <template #extra>
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-user"></i>
+        Username
+      </template>
+      kooriookami
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-mobile-phone"></i>
+        Telephone
+      </template>
+      18100000000
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-location-outline"></i>
+        Place
+      </template>
+      Suzhou
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-tickets"></i>
+        Remarks
+      </template>
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-office-building"></i>
+        Address
+      </template>
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
+  </el-descriptions>
+
+  <el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
+    <template #extra>
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <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>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        size: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Vertical List
+
+:::demo
+
+```html
+<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">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>
+
+<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">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>
+```
+:::
+
+### Descriptions Attributes
+| Attribute     | Description       | Type       | Accepted Values        | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| border        | with or without border      | boolean  |          —             |    false     |
+| column        | numbers of `Descriptions Item` in one line  | number | — |    3  |
+| direction     | direction of list  | string | vertical / horizontal |    horizontal  |
+| size          | size of list    | string  |    medium / small / mini  |  — |
+| title         | title text, display on the top left    | string  |    —  |  — |
+| extra         | extra text, display on the top right    | string  |    —  |  — |
+
+### Descriptions Slots
+
+| Name | Description |
+|------|--------|
+| title | custom title, display on the top left  |
+| extra | custom extra area, display on the top right  |
+
+### Descriptions Item Attributes
+| Attribute       | Description        | Type       | Accepted Values       | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| label          | label text         | string  |          —             |    —     |
+| span          | colspan of column       | number  |          —             |    1     |
+
+### Descriptions Item Slots
+
+| Name | Description |
+|------|--------|
+| label | custom label  |

website/docs/jp/descriptions.md

@@ -0,0 +1,156 @@
+## Descriptions
+
+Display multiple fields in list form.
+
+### Basic usage
+
+:::demo
+
+```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>
+```
+:::
+
+### Sizes
+
+:::demo
+
+```html
+<template>
+  <el-radio-group v-model="size">
+    <el-radio label="">Default</el-radio>
+    <el-radio label="medium">Medium</el-radio>
+    <el-radio label="small">Small</el-radio>
+    <el-radio label="mini">Mini</el-radio>
+  </el-radio-group>
+
+  <el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
+    <template #extra>
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-user"></i>
+        Username
+      </template>
+      kooriookami
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-mobile-phone"></i>
+        Telephone
+      </template>
+      18100000000
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-location-outline"></i>
+        Place
+      </template>
+      Suzhou
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-tickets"></i>
+        Remarks
+      </template>
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-office-building"></i>
+        Address
+      </template>
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
+  </el-descriptions>
+
+  <el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
+    <template #extra>
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <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>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        size: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Vertical List
+
+:::demo
+
+```html
+<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">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>
+
+<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">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>
+```
+:::
+
+### Descriptions Attributes
+| Attribute     | Description       | Type       | Accepted Values        | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| border        | with or without border      | boolean  |          —             |    false     |
+| column        | numbers of `Descriptions Item` in one line  | number | — |    3  |
+| direction     | direction of list  | string | vertical / horizontal |    horizontal  |
+| size          | size of list    | string  |    medium / small / mini  |  — |
+| title         | title text, display on the top left    | string  |    —  |  — |
+| extra         | extra text, display on the top right    | string  |    —  |  — |
+
+### Descriptions Slots
+
+| Name | Description |
+|------|--------|
+| title | custom title, display on the top left  |
+| extra | custom extra area, display on the top right  |
+
+### Descriptions Item Attributes
+| Attribute       | Description        | Type       | Accepted Values       | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| label          | label text         | string  |          —             |    —     |
+| span          | colspan of column       | number  |          —             |    1     |
+
+### Descriptions Item Slots
+
+| Name | Description |
+|------|--------|
+| label | custom label  |

website/docs/zh-CN/descriptions.md

@@ -0,0 +1,156 @@
+## Descriptions 描述列表
+
+列表形式展示多个字段。
+
+### 基础用法
+
+:::demo
+
+```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>
+```
+:::
+
+### 不同尺寸
+
+:::demo
+
+```html
+<template>
+  <el-radio-group v-model="size">
+    <el-radio label="">默认</el-radio>
+    <el-radio label="medium">中等</el-radio>
+    <el-radio label="small">小型</el-radio>
+    <el-radio label="mini">超小</el-radio>
+  </el-radio-group>
+
+  <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
+    <template #extra>
+      <el-button type="primary" size="small">操作</el-button>
+    </template>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-user"></i>
+        用户名
+      </template>
+      kooriookami
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-mobile-phone"></i>
+        手机号
+      </template>
+      18100000000
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-location-outline"></i>
+        居住地
+      </template>
+      苏州市
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-tickets"></i>
+        备注
+      </template>
+      <el-tag size="small">学校</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-office-building"></i>
+        联系地址
+      </template>
+      江苏省苏州市吴中区吴中大道 1188 号
+    </el-descriptions-item>
+  </el-descriptions>
+
+  <el-descriptions class="margin-top" title="无边框列表" :column="3" :size="size">
+    <template #extra>
+      <el-button type="primary" size="small">操作</el-button>
+    </template>
+    <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>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        size: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 垂直列表
+
+:::demo
+
+```html
+<el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border>
+  <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+  <el-descriptions-item label="居住地" :span="2">苏州市</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>
+
+<el-descriptions class="margin-top" title="垂直无边框列表" :column="4" direction="vertical">
+  <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+  <el-descriptions-item label="居住地" :span="2">苏州市</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>
+```
+:::
+
+### Descriptions Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| border        | 是否带有边框         | boolean  |          —             |    false     |
+| column        | 一行 `Descriptions Item` 的数量  | number | — |    3  |
+| direction     | 排列的方向  | string | vertical / horizontal |    horizontal  |
+| size          | 列表的尺寸    | string  |    medium / small / mini  |  — |
+| title         | 标题文本，显示在左上方    | string  |    —  |  — |
+| extra         | 操作区文本，显示在右上方    | string  |    —  |  — |
+
+### Descriptions Slots
+
+| Name | 说明 |
+|------|--------|
+| title | 自定义标题，显示在左上方  |
+| extra | 自定义操作区，显示在右上方  |
+
+### Descriptions Item Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| label          | 标签文本         | string  |          —             |    —     |
+| span          | 列的数量         | number  |          —             |    1     |
+
+### Descriptions Item Slots
+
+| Name | 说明 |
+|------|--------|
+| label | 自定义标签文本  |

website/nav.config.json

@@ -197,6 +197,10 @@
               "path": "/empty",
               "title": "Empty 空状态"
             },
+            {
+              "path": "/descriptions",
+              "title": "Descriptions 描述列表"
+            },
             {
               "path": "/result",
               "title": "Result 结果"
@@ -519,6 +523,10 @@
               "path": "/empty",
               "title": "Empty"
             },
+            {
+              "path": "/descriptions",
+              "title": "Descriptions"
+            },
             {
               "path": "/result",
               "title": "Result"
@@ -845,6 +853,10 @@
               "path": "/empty",
               "title": "Empty"
             },
+            {
+              "path": "/descriptions",
+              "title": "Descriptions"
+            },
             {
               "path": "/result",
               "title": "Result"
@@ -1171,6 +1183,10 @@
               "path": "/empty",
               "title": "Empty"
             },
+            {
+              "path": "/descriptions",
+              "title": "Descriptions"
+            },
             {
               "path": "/result",
               "title": "Result"
@@ -1497,6 +1513,10 @@
               "path": "/empty",
               "title": "Empty"
             },
+            {
+              "path": "/descriptions",
+              "title": "Descriptions"
+            },
             {
               "path": "/result",
               "title": "Result"