自定义 elementUI 描述列表组件

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

前言

以前用 ant design vue,组件特别多。 里面有一个描述组件很好用(

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

组件设计思路

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

组件开发

  • 父组件 el-description

    
    
    
    
    
    
  • 子组件 el-description-item

    
    
    
    
    
    

组件使用

  • 组件引用

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

        
        
        
          
          
          
          
          
          
          
          
          
            
            
          
        
  • 显示效果

    image

你可能感兴趣的:(自定义 elementUI 描述列表组件)