自定义elementUI描述列表组件

.descriptions{.描述标题{margin-bottom:20px;颜色：rgba(0,0,0,.85)；字体粗细：700；字体大小：16px；行高：1.5；tions-view{宽度：100%；溢出：隐藏；表格{宽度：100%；表格布局：固定；边界崩溃：崩溃；}.descriptions-row{}}}原文地址：http://isee.xyz/a/60370591cfe9924ea139030d前言之前用过antdesignvue，组件比较多。里面有个描述组件很好用（），后来转成element发现没有这个组件，每次都需要自己写。但是一个项目的界面风格是需要统一的，每次都去copy代码是很麻烦的，而且如果要改风格那就是炸弹了，千万不能累死。咬咬牙，跺着脚，自己写一个。组件设计思想是通过嵌套父子组件实现的，父组件为el-description，子组件为el-description-item。el-description-item必须保证默认显示label和value，也可以使用slot来自定义内容。利用vue的$slot.content实现子组件的内容定制。如果不存在，则显示默认值。如果存在则表示自定义内容使用el-row和el-col实现网格布局组件开发父组件el-description.descriptions{.描述标题{margin-bottom:20px;颜色：rgba(0,0,0,.85)；字体粗细：700；字体大小：16px；行高：1.5；tions-view{宽度：100%；溢出：隐藏；表格{宽度：100%；表格布局：固定；边界崩溃：崩溃；}.descriptions-row{}}}子组件el-description-item.descriptions-item{padding-bottom:16px;向右填充：20px；span{显示：内联块；}.descriptions-item-content{显示：flex；证明内容：flex-start；对齐项目：居中；颜色：rgba(0,0,0,.65)；字体大小：14px；行高：1.5；宽度：100%；.descriptions-item-label{flex-grow:0;伸缩收缩：0；颜色：rgba(0,0,0,.85)；字体粗细：400；字体大小：14px；行高：1.5；}.descriptions-item-value{flex-grow:1;溢出：隐藏；.default-value{溢出：隐藏；文本溢出：省略号；空白：nowrap；}}}}组件使用组件引用//importcomponentsimportElDescriptionfrom'@/components/ElDescription'importElDescriptionItemfrom'@/components/ElDescriptionItem'exportdefault{//declarecomponentcomponents:{ElDescription,ElDescriptionItem}}componentsuse我是自定义内容