自定义 elementUI 描述列表组件

原文地址：http://isee.xyz/a/60370591cfe9924ea139030d

前言

以前用 ant design vue，组件特别多。 里面有一个描述组件很好用(描述组件)，后来切换到 element 发现没有这种组件，每次都需要自己编写。但是一个项目界面风格要统一，每次都复制代码很是麻烦，而且如果要改样式，那么就是一个炸弹呀，还不得累死。一咬牙，一跺脚，自己写一个吧。

组件设计思路

1. 使用父子组件嵌套实现，父组件为 el-description , 子组件为 el-description-item 。
2. el-description-item 要保证默认显示 label 和 value ，而且还可以使用 slot 来定制内容
3. 利用 vue 的 $slot.content是否存在来实现子组件的内容定制，不存在则显示默认 value，存在则表示是定制内容
4. 利用 el-row 和 el-col 来实现栅格布局

组件开发

• 父组件 el-description

• 子组件 el-description-item

组件使用

• 组件引用

  // 引入组件
  import ElDescription from '@/components/ElDescription'
  import ElDescriptionItem from '@/components/ElDescriptionItem'
  
  export default {
  // 声明组件
    components: { ElDescription, ElDescriptionItem }
  }
  

• 组件使用

• 显示效果

  description.jpg