vue的element-ui 两种 el-table 实现数据展现:默认加载固定字段展示与动态匹配字段展示

el-table 实现数据展现:默认加载固定字段展示与动态匹配字段展示

 

第一种:默认加载固定展示

常规绑定数据集array默认为(gridList),代表返回数据集

也可以自定义,在初始化页面,加载返回: return {data:{data : dataArr, total: total}},gridList改为dataArr即可,total为分页返回数据。

         
          
          
          
            
             
            
          
        

 

 

第二种:动态匹配字段展示

常规绑定数据集array为tableData同理代表返回数据集(有key和value)。

columns字段名数组,

columnNames显示label数组。columns和columnNames是对应数组

用v-for循环遍历,实现tableData的key与columns配对,

显示columns和columnNames对应label显示,tableData的value展示

 

                             
                                
                                
                                
                                
                                
                            

就是这么傻,还在天真的玩耍中......

你可能感兴趣的:(element,vue)