Element UI Descriptions 描述列表组件详解API 全解与源码渲染机制【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element本文围绕 Element UIVue.js 2.0 组件库的el-descriptions描述列表组件展开完整覆盖其基础用法、尺寸、垂直布局、自定义样式等全部官方 API并深入packages/descriptions源码剖析“占位 Item 父级集中渲染”的架构设计、getRows换行算法与三种 DOM 结构差异帮助读者既能快速上手该组件也能理解其表格布局的底层实现。Descriptions 用于以列表形式展示多个字段常见于详情页的信息陈列场景如用户信息、订单详情。它本质上是一个语义化的表格无边框模式下是“标签 内容”的松散排列开启border后则呈现为带分隔线的表格。以下示例与 API 表均继承自仓库中的 es 文档实现细节以 源码入口 为准。基础用法el-descriptions内嵌若干el-descriptions-item每个 item 通过label属性指定标签文本默认插槽为内容el-descriptions titleUser Info el-descriptions-item labelUsernamekooriookami/el-descriptions-item el-descriptions-item labelTelephone18100000000/el-descriptions-item el-descriptions-item labelPlaceSuzhou/el-descriptions-item el-descriptions-item labelRemarks el-tag sizesmallSchool/el-tag /el-descriptions-item el-descriptions-item labelAddressNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province/el-descriptions-item /el-descriptions其中title显示在列表左上方内容可以是任意文本或组件如示例中的el-tag因为 default 插槽会被原样渲染。不同尺寸与标签富文本通过size属性控制列表尺寸可选medium/small/mini不传时使用全局尺寸同时可以结合border、column和extra插槽构建“带操作区”的详情卡片template el-radio-group v-modelsize el-radio labelDefault/el-radio el-radio labelmediumMedium/el-radio el-radio labelsmallSmall/el-radio el-radio labelminiMini/el-radio /el-radio-group el-descriptions classmargin-top titleWith border :column3 :sizesize border template slotextra el-button typeprimary sizesmallOperation/el-button /template el-descriptions-item template slotlabel i classel-icon-user/i Username /template kooriookami /el-descriptions-item el-descriptions-item template slotlabel i classel-icon-mobile-phone/i Telephone /template 18100000000 /el-descriptions-item el-descriptions-item template slotlabel i classel-icon-location-outline/i Place /template Suzhou /el-descriptions-item el-descriptions-item template slotlabel i classel-icon-tickets/i Remarks /template el-tag sizesmallSchool/el-tag /el-descriptions-item el-descriptions-item template slotlabel i classel-icon-office-building/i Address /template No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province /el-descriptions-item /el-descriptions el-descriptions classmargin-top titleWithout border :column3 :sizesize template slotextra el-button typeprimary sizesmallOperation/el-button /template el-descriptions-item labelUsernamekooriookami/el-descriptions-item el-descriptions-item labelTelephone18100000000/el-descriptions-item el-descriptions-item labelPlaceSuzhou/el-descriptions-item el-descriptions-item labelRemarks el-tag sizesmallSchool/el-tag /el-descriptions-item el-descriptions-item labelAddressNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province/el-descriptions-item /el-descriptions /template script export default { data () { return { size: }; } } /script这里有几个值得注意的 API 组合size的解析在 源码 中由计算属性descriptionsSize完成this.size || (this.$ELEMENT || {}).size即组件自身未设置时回退到全局配置最终体现在表格 classel-descriptions--medium等上el-descriptions-item的label插槽允许标签携带图标等富文本而不仅仅是label属性extra插槽用于渲染右上角的操作区测试用例 test/unit/specs/descriptions.spec.js 验证了title/extra属性会渲染到.el-descriptions__title与.el-descriptions__extra节点。垂直列表directionvertical让标签位于内容上方类似表单的上下结构span控制单个 item 占据的列数el-descriptions titleVertical list with border directionvertical :column4 border el-descriptions-item labelUsernamekooriookami/el-descriptions-item el-descriptions-item labelTelephone18100000000/el-descriptions-item el-descriptions-item labelPlace :span2Suzhou/el-descriptions-item el-descriptions-item labelRemarks el-tag sizesmallSchool/el-tag /el-descriptions-item el-descriptions-item labelAddressNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province/el-descriptions-item /el-descriptions el-descriptions classmargin-top titleVertical list without border :column4 directionvertical el-descriptions-item labelUsernamekooriookami/el-descriptions-item el-descriptions-item labelTelephone18100000000/el-descriptions-item el-descriptions-item labelPlace :span2Suzhou/el-descriptions-item el-descriptions-item labelRemarks el-tag sizesmallSchool/el-tag /el-descriptions-item el-descriptions-item labelAddressNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province/el-descriptions-item /el-descriptions从源码看direction只接受horizontal/vertical两个值prop 定义在 行渲染组件 中vertical 模式会为每一组 item 输出两行第一行是th标签行colSpanspan第二行是td内容行单测 direction props 用例 也验证了两种方向下 DOM 结构确实不同。自定义样式label-class-name/content-class-name可分别定制标签与内容的类名label-style/content-style支持行内样式对象el-descriptions titleCustomized style list :column3 border el-descriptions-item labelUsername label-class-namemy-label content-class-namemy-contentkooriookami/el-descriptions-item el-descriptions-item labelTelephone18100000000/el-descriptions-item el-descriptions-item labelPlaceSuzhou/el-descriptions-item el-descriptions-item labelRemarks el-tag sizesmallSchool/el-tag /el-descriptions-item el-descriptions-item labelAddress :content-style{text-align: right}No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province/el-descriptions-item /el-descriptions style .my-label { background: #E1F3D8; } .my-content { background: #FDE2E2; } /style这些类名/样式的生效位置在 descriptions-row.jsitem 级别的labelClassName等属性会覆盖父级同名属性item.props[key] || elDescriptions[key]这解释了“父级设置兜底、item 级设置优先”的继承关系对应断言见 class props 测试。API 参考el-descriptions AttributesAttributeDescriptionTypeAccepted ValuesDefaultborder是否带有边框boolean—falsecolumn一行el-descriptions-item的数量number—3direction排列的方向stringvertical / horizontalhorizontalsize列表的尺寸stringmedium / small / mini—title标题文本显示在左上方string——extra操作区文本显示在右上方string——colon是否显示冒号覆盖 item 默认值boolean—truelabelClassName自定义标签类名string——contentClassName自定义内容类名string——labelStyle自定义标签样式object——contentStyle自定义内容样式object——以上默认值与 props 定义 完全一致border: false、column: 3、direction: horizontal、colon: true。el-descriptions SlotsNameDescriptiontitle自定义标题显示在左上方优先于title属性extra自定义操作区显示在右上方优先于extra属性render 函数 中仅当title、extra或对应插槽存在时才渲染.el-descriptions__header头部容器且插槽内容优先于同名属性输出。el-descriptions-item AttributesAttributeDescriptionTypeAccepted ValuesDefaultlabel标签文本string——span占据的列数列跨度number—1labelClassName自定义标签类名string——contentClassName自定义内容类名string——labelStyle自定义标签样式object——contentStyle自定义内容样式object——el-descriptions-item SlotsNameDescriptionlabel自定义标签可包含图标等富文本default自定义内容未在上表单列但为 item 的主插槽源码架构Item 不渲染 DOM父级统一排版理解 Descriptions 的关键在于它的组件分工。el-descriptions-item本身是一个占位组件其 render 函数直接返回 null// packages/descriptions/src/descriptions-item.js export default { name: ElDescriptionsItem, props: { label, span, contentClassName, contentStyle, labelClassName, labelStyle }, render() { return null; } };它只负责声明 props 与插槽真正的 DOM 由el-descriptions在父级统一生成。父组件通过provide/inject把自己暴露为elDescriptionsprovide 定义再由内部的ElDescriptionsRow逐行渲染。这种设计的收益是换行、补全列宽等跨 item 的排版决策可以在一处集中完成避免每个 item 自己计算位置。getRows换行与补位算法getRows 方法 是整个布局的核心逻辑如下从默认插槽的 vnode 中筛出名为ElDescriptionsItem的子节点用getOptionProps/getSlots分别提取合并了默认值的 propsspan默认 1和插槽label/ default以column为剩余列数计数器遍历节点span count时累计到当前行span count时结束当前行、重置count column并开始新一行两个特殊修正由 filledNode 完成span超过当前行剩余列数时钳制为count最后一个 item 始终被强制填充整行剩余宽度isLast分支保证边框模式下表格末行不会留白。单测 span props 用例 验证了:span2会生成colSpan2的单元格column props 用例 则体现了补位规则在边框/无边框下的不同表象column5配 10 个 item无边框模式首行 5 个单元格边框模式首行 10 个子节点因为边框模式每个 item 生成thtd两个单元格。三种 DOM 结构ElDescriptionsRow 的 render 按父级配置输出三种结构模式结构关键细节vertical每行两个trth标签行 td内容行单元格colSpanspan边框模式下标签不再显示冒号has-colon为 falsehorizontal border每个 item 输出thcolSpan1tdtd的colSpan span * 2 - 1从而让标签列与内容列宽度对称horizontal 无边框单行tr每格是一个td内含 label/content 两个spancolSpanspancolon为 true 时 label 追加has-colon类冒号的开关colon只在无边框水平模式下生效第 99 行 的has-colon: elDescriptions.colon边框与垂直模式下标签统一不加冒号。样式侧descriptions.scss 定义了容器结构.el-descriptions__table默认table-layout: fixed列宽均分而.is-bordered切换为table-layout: auto并为单元格加上边框与12px 10px内边距尺寸则由el-descriptions--medium/small/mini类级联生效。安装与引用组件随 element-ui 完整引入自动注册src/index.js 第 89-90 行 同时引入 Descriptions 与 DescriptionsItem也可按需引入import { Descriptions, DescriptionsItem } from element-ui; Vue.component(Descriptions.name, Descriptions); Vue.component(DescriptionsItem.name, DescriptionsItem);按需安装的入口文件见 packages/descriptions/index.js 与 packages/descriptions-item/index.js两者均内置install方法。TypeScript 项目中的属性与插槽签名可参考 types/descriptions.d.ts 和 types/descriptions-item.d.ts。小结Descriptions 以“表格”为骨架展示多字段信息columnspan决定网格排版direction与border决定标签与内容的相对位置及外观架构上是典型的“子组件占位、父组件渲染”模式ElDescriptionsItem的render返回 null排版完全由el-descriptions的getRows算法集中决策末行自动补位保证边框模式下的整齐表格类名与行内样式支持“父级兜底 item 级覆盖”的两级继承配合title/extra/label插槽可以覆盖从纯文本到富文本的操作卡片场景行为均有单测背书见 test/unit/specs/descriptions.spec.js可用于回归验证border、column、direction、span等属性的渲染结果。【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Element UI Descriptions 描述列表组件详解API 全解与源码渲染机制【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element本文围绕 Element UIVue.js 2.0 组件库的el-descriptions描述列表组件展开完整覆盖其基础用法、尺寸、垂直布局、自定义样式等全部官方 API并深入packages/descriptions源码剖析“占位 Item 父级集中渲染”的架构设计、getRows换行算法与三种 DOM 结构差异帮助读者既能快速上手该组件也能理解其表格布局的底层实现。Descriptions 用于以列表形式展示多个字段常见于详情页的信息陈列场景如用户信息、订单详情。它本质上是一个语义化的表格无边框模式下是“标签 内容”的松散排列开启border后则呈现为带分隔线的表格。以下示例与 API 表均继承自仓库中的 es 文档实现细节以 源码入口 为准。基础用法el-descriptions内嵌若干el-descriptions-item每个 item 通过label属性指定标签文本默认插槽为内容el-descriptions titleUser Info el-descriptions-item labelUsernamekooriookami/el-descriptions-item el-descriptions-item labelTelephone18100000000/el-descriptions-item el-descriptions-item labelPlaceSuzhou/el-descriptions-item el-descriptions-item labelRemarks el-tag sizesmallSchool/el-tag /el-descriptions-item el-descriptions-item labelAddressNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province/el-descriptions-item /el-descriptions其中title显示在列表左上方内容可以是任意文本或组件如示例中的el-tag因为 default 插槽会被原样渲染。不同尺寸与标签富文本通过size属性控制列表尺寸可选medium/small/mini不传时使用全局尺寸同时可以结合border、column和extra插槽构建“带操作区”的详情卡片template el-radio-group v-modelsize el-radio labelDefault/el-radio el-radio labelmediumMedium/el-radio el-radio labelsmallSmall/el-radio el-radio labelminiMini/el-radio /el-radio-group el-descriptions classmargin-top titleWith border :column3 :sizesize border template slotextra el-button typeprimary sizesmallOperation/el-button /template el-descriptions-item template slotlabel i classel-icon-user/i Username /template kooriookami /el-descriptions-item el-descriptions-item template slotlabel i classel-icon-mobile-phone/i Telephone /template 18100000000 /el-descriptions-item el-descriptions-item template slotlabel i classel-icon-location-outline/i Place /template Suzhou /el-descriptions-item el-descriptions-item template slotlabel i classel-icon-tickets/i Remarks /template el-tag sizesmallSchool/el-tag /el-descriptions-item el-descriptions-item template slotlabel i classel-icon-office-building/i Address /template No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province /el-descriptions-item /el-descriptions el-descriptions classmargin-top titleWithout border :column3 :sizesize template slotextra el-button typeprimary sizesmallOperation/el-button /template el-descriptions-item labelUsernamekooriookami/el-descriptions-item el-descriptions-item labelTelephone18100000000/el-descriptions-item el-descriptions-item labelPlaceSuzhou/el-descriptions-item el-descriptions-item labelRemarks el-tag sizesmallSchool/el-tag /el-descriptions-item el-descriptions-item labelAddressNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province/el-descriptions-item /el-descriptions /template script export default { data () { return { size: }; } } /script这里有几个值得注意的 API 组合size的解析在 源码 中由计算属性descriptionsSize完成this.size || (this.$ELEMENT || {}).size即组件自身未设置时回退到全局配置最终体现在表格 classel-descriptions--medium等上el-descriptions-item的label插槽允许标签携带图标等富文本而不仅仅是label属性extra插槽用于渲染右上角的操作区测试用例 test/unit/specs/descriptions.spec.js 验证了title/extra属性会渲染到.el-descriptions__title与.el-descriptions__extra节点。垂直列表directionvertical让标签位于内容上方类似表单的上下结构span控制单个 item 占据的列数el-descriptions titleVertical list with border directionvertical :column4 border el-descriptions-item labelUsernamekooriookami/el-descriptions-item el-descriptions-item labelTelephone18100000000/el-descriptions-item el-descriptions-item labelPlace :span2Suzhou/el-descriptions-item el-descriptions-item labelRemarks el-tag sizesmallSchool/el-tag /el-descriptions-item el-descriptions-item labelAddressNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province/el-descriptions-item /el-descriptions el-descriptions classmargin-top titleVertical list without border :column4 directionvertical el-descriptions-item labelUsernamekooriookami/el-descriptions-item el-descriptions-item labelTelephone18100000000/el-descriptions-item el-descriptions-item labelPlace :span2Suzhou/el-descriptions-item el-descriptions-item labelRemarks el-tag sizesmallSchool/el-tag /el-descriptions-item el-descriptions-item labelAddressNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province/el-descriptions-item /el-descriptions从源码看direction只接受horizontal/vertical两个值prop 定义在 行渲染组件 中vertical 模式会为每一组 item 输出两行第一行是th标签行colSpanspan第二行是td内容行单测 direction props 用例 也验证了两种方向下 DOM 结构确实不同。自定义样式label-class-name/content-class-name可分别定制标签与内容的类名label-style/content-style支持行内样式对象el-descriptions titleCustomized style list :column3 border el-descriptions-item labelUsername label-class-namemy-label content-class-namemy-contentkooriookami/el-descriptions-item el-descriptions-item labelTelephone18100000000/el-descriptions-item el-descriptions-item labelPlaceSuzhou/el-descriptions-item el-descriptions-item labelRemarks el-tag sizesmallSchool/el-tag /el-descriptions-item el-descriptions-item labelAddress :content-style{text-align: right}No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province/el-descriptions-item /el-descriptions style .my-label { background: #E1F3D8; } .my-content { background: #FDE2E2; } /style这些类名/样式的生效位置在 descriptions-row.jsitem 级别的labelClassName等属性会覆盖父级同名属性item.props[key] || elDescriptions[key]这解释了“父级设置兜底、item 级设置优先”的继承关系对应断言见 class props 测试。API 参考el-descriptions AttributesAttributeDescriptionTypeAccepted ValuesDefaultborder是否带有边框boolean—falsecolumn一行el-descriptions-item的数量number—3direction排列的方向stringvertical / horizontalhorizontalsize列表的尺寸stringmedium / small / mini—title标题文本显示在左上方string——extra操作区文本显示在右上方string——colon是否显示冒号覆盖 item 默认值boolean—truelabelClassName自定义标签类名string——contentClassName自定义内容类名string——labelStyle自定义标签样式object——contentStyle自定义内容样式object——以上默认值与 props 定义 完全一致border: false、column: 3、direction: horizontal、colon: true。el-descriptions SlotsNameDescriptiontitle自定义标题显示在左上方优先于title属性extra自定义操作区显示在右上方优先于extra属性render 函数 中仅当title、extra或对应插槽存在时才渲染.el-descriptions__header头部容器且插槽内容优先于同名属性输出。el-descriptions-item AttributesAttributeDescriptionTypeAccepted ValuesDefaultlabel标签文本string——span占据的列数列跨度number—1labelClassName自定义标签类名string——contentClassName自定义内容类名string——labelStyle自定义标签样式object——contentStyle自定义内容样式object——el-descriptions-item SlotsNameDescriptionlabel自定义标签可包含图标等富文本default自定义内容未在上表单列但为 item 的主插槽源码架构Item 不渲染 DOM父级统一排版理解 Descriptions 的关键在于它的组件分工。el-descriptions-item本身是一个占位组件其 render 函数直接返回 null// packages/descriptions/src/descriptions-item.js export default { name: ElDescriptionsItem, props: { label, span, contentClassName, contentStyle, labelClassName, labelStyle }, render() { return null; } };它只负责声明 props 与插槽真正的 DOM 由el-descriptions在父级统一生成。父组件通过provide/inject把自己暴露为elDescriptionsprovide 定义再由内部的ElDescriptionsRow逐行渲染。这种设计的收益是换行、补全列宽等跨 item 的排版决策可以在一处集中完成避免每个 item 自己计算位置。getRows换行与补位算法getRows 方法 是整个布局的核心逻辑如下从默认插槽的 vnode 中筛出名为ElDescriptionsItem的子节点用getOptionProps/getSlots分别提取合并了默认值的 propsspan默认 1和插槽label/ default以column为剩余列数计数器遍历节点span count时累计到当前行span count时结束当前行、重置count column并开始新一行两个特殊修正由 filledNode 完成span超过当前行剩余列数时钳制为count最后一个 item 始终被强制填充整行剩余宽度isLast分支保证边框模式下表格末行不会留白。单测 span props 用例 验证了:span2会生成colSpan2的单元格column props 用例 则体现了补位规则在边框/无边框下的不同表象column5配 10 个 item无边框模式首行 5 个单元格边框模式首行 10 个子节点因为边框模式每个 item 生成thtd两个单元格。三种 DOM 结构ElDescriptionsRow 的 render 按父级配置输出三种结构模式结构关键细节vertical每行两个trth标签行 td内容行单元格colSpanspan边框模式下标签不再显示冒号has-colon为 falsehorizontal border每个 item 输出thcolSpan1tdtd的colSpan span * 2 - 1从而让标签列与内容列宽度对称horizontal 无边框单行tr每格是一个td内含 label/content 两个spancolSpanspancolon为 true 时 label 追加has-colon类冒号的开关colon只在无边框水平模式下生效第 99 行 的has-colon: elDescriptions.colon边框与垂直模式下标签统一不加冒号。样式侧descriptions.scss 定义了容器结构.el-descriptions__table默认table-layout: fixed列宽均分而.is-bordered切换为table-layout: auto并为单元格加上边框与12px 10px内边距尺寸则由el-descriptions--medium/small/mini类级联生效。安装与引用组件随 element-ui 完整引入自动注册src/index.js 第 89-90 行 同时引入 Descriptions 与 DescriptionsItem也可按需引入import { Descriptions, DescriptionsItem } from element-ui; Vue.component(Descriptions.name, Descriptions); Vue.component(DescriptionsItem.name, DescriptionsItem);按需安装的入口文件见 packages/descriptions/index.js 与 packages/descriptions-item/index.js两者均内置install方法。TypeScript 项目中的属性与插槽签名可参考 types/descriptions.d.ts 和 types/descriptions-item.d.ts。小结Descriptions 以“表格”为骨架展示多字段信息columnspan决定网格排版direction与border决定标签与内容的相对位置及外观架构上是典型的“子组件占位、父组件渲染”模式ElDescriptionsItem的render返回 null排版完全由el-descriptions的getRows算法集中决策末行自动补位保证边框模式下的整齐表格类名与行内样式支持“父级兜底 item 级覆盖”的两级继承配合title/extra/label插槽可以覆盖从纯文本到富文本的操作卡片场景行为均有单测背书见 test/unit/specs/descriptions.spec.js可用于回归验证border、column、direction、span等属性的渲染结果。【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
