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组件

封装e-desc-item组件

使用方式

参数说明

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。