这篇文章主要为大家详细介绍了Vue Element UI自定义描述列表组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue Element UI自定义描述列表组件的具体代码，供大家参考，具体内容如下

效果图

写在前面

写后台管理经常从列表点击查看详情，展示数据信息，Element UI虽然有表格组件，但是描述组件并没有，之前团队的成员遇到这种情况都自己去写样式，写起来也麻烦，而且每个人写出来的样式也不统一，破坏了项目的整体风格。
像是Ant Design UI就有描述组件，用起来特别舒服，所以索性自己结合Element UI的el-row和el-col自己写了一个。

实现哪些功能

1、每行的高度根据改行中某一列的最大高度自动撑开
2、列宽度自动补全，避免最后一列出现残缺的情况
3、支持纯文本与HTML插槽
4、支持每行几列的设置
5、支持每列宽度自定义
6、支持动态数据重绘

组件设计

1、使用父子组件嵌套实现，父组件为 e-desc, 子组件为 e-desc-item 。
2、e-desc-item传递props的label 和 插槽的value，使用 $slots.content来显示DOM
3、利用 el-row 和 el-col 来实现整体组件布局

封装e-desc组件

   
  .desc{ .desc-title { margin-bottom: 10px; color: #333; font-weight: 700; font-size: 16px; line-height: 1.5715; } .desc-row{ display: flex; flex-wrap: wrap; border-radius: 2px; border: 1px solid #EBEEF5; border-bottom: 0; border-right: 0; width: 100%; } } 

封装e-desc-item组件

     暂无数据 .desc-item { border-right: 1px solid #EBEEF5; border-bottom: 1px solid #EBEEF5; .desc-item-content { display: flex; justify-content: flex-start; align-items: center; color: rgba(0,0,0,.65); font-size: 14px; line-height: 1.5; width: 100%; background-color: #fafafa; height: 100%; .desc-item-label{ border-right: 1px solid #EBEEF5; display: inline-block; padding: 12px 16px; flex-grow: 0; flex-shrink: 0; color: rgba(0, 0, 0, 0.6); font-weight: 400; font-size: 14px; line-height: 1.5; height: 100%; display: flex; align-items: center; } .desc-item-value{ background: #fff; padding: 12px 16px; flex-grow: 1; overflow: hidden; word-break: break-all; height: 100%; display: flex; align-items: center; color: #444; span{ color: #aaa; } } &.small { .desc-item-label, .desc-item-value { padding: 10px 14px; } } } } 

使用方式

   {{info.name}}{{ info.age }}岁{{ info.sex }}{{ info.school }}{{ info.major }}{{ info.hobby }}{{ info.phone }}{{ info.wx }}{{ info.qq }}{{ info.address }}{{ info.intro }}  修改删除

参数说明

至此，代码就写完啦，考虑不周或者有bug的地方，还望多多留言告知我哟

以上就是Vue Element UI自定义描述列表组件的详细内容，更多请关注本站其它相关文章！