vue elementui二次封装el-table带插槽问题

目录

• elementui二次封装el-table带插槽
• element-ui table组件的二次封装(插槽的形式)
• 1.外层table组件封装
• 2.内层table组件代码 

elementui二次封装el-table带插槽

子组件table封装 html部分

js部分

在父组件中使用 html 代码

js代码部分

这里基本的使用都可以满足，里面包含表列的：自定义插槽；表格选择器；表格序号以及多级表头的渲染。

通用样式一般根据定制的格式来写，一般来说表格基本格式都是一样的，也有可能会出现表格的表头行高，表格的行高内容不一样的情况，也可通过配置参数来处理。

element-ui table组件的二次封装(插槽的形式)

由于业务需求，对el-table组件进行了二次封装，封装分为两层，两个组件嵌套，也能够单独使用

篇幅原因简单的JS逻辑处理没有贴上来了

1.外层table组件封装

        
          
        
        
          新建
          
          
        
      
      
      
      
        
          

        
      
      
      
        
          
            
            
          
        
      

核心代码是这一段，通过插槽的形式，显示需要特殊处理的字段

外层组件table-view使用示例

      

        {{ getType(row.templateType) }}
      
      

        {{ getStatus(row.templateStatus) }}
      
      
      
    

2.内层table组件代码 

    

      
        
          
          
            
            
            
              
            
            
              

                {{ operationData.edit.text || '编辑' }}
                {{ operationData.view.text || '查看' }}
                {{ operationData.del.text || '删除' }}
                
              
            
          
          
          
          

            
            
          
          
        
      
    

内层组件 itl-table使用示例

  
   
       {{ scope.row.orgName }}
   
   
      
          

              {{ scope.row.postName }}
       
    
 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。