Avue框架，表格高度设置固定值后，表头是什么和字段内存错位

来源：蜘蛛抓取(WebSpider) 时间：2020-07-02 11:35 标签： 表头是什么 

  • 因为加了boder属性所以表格会稍有錯位

     
    
        
     
    
      
    
    
    • 
    
  • 
      
    
        

    方法一：添加css样式覆盖
    
把这样式添加到index.html中、或者app.vue中（必须是入口文件，才能全局起作用！）

    
        

    注：在我的项目中有一个项目用这个方法能解决另外一个项目不能解决。。采用的方法二

    方法二：同样添加css样式覆盖

    
        

    方法三：网上搜的没有尝试过
    
在el-table组件挂载一个ref=“configurationTable”然后茬每次请求数据成功后动一动表格的默认宽度

    
        
    
      
    
    
    • 
    
  • 
      
    
        
    
        
    
      
    
    
    • 
    
  • 
      
    
        

    最近在用element-ui开发一个erp系统，里面需要用到非常多的表格数据量也非常大，但是发现了element-ui有表格錯位的问了在此记录一下解决方法：

    
        
    
 

    
        

    注意：把这样式添加到index.html中、或者app.vue中（必须是入口文件，才能全局起作用！）

    
      
    
    
    • 
    
  • 
      
    
        
    
          更新（）：据网友（nchencc）提供的方法只需要在App.vue的style里添加以下...在vue项目中引入elementUI的table组件，当将表格的头部和列固定后就会出现表头是什么与内容错位的问题如下图： ②、解决方法：...
        
    
      
    
    
    • 
    
  • 
      
    
        
    
          哎，element真是一个让人又爱又恨的东西你用着很爽想华丽丽原地转圈的时候，它就会出来绊你一脚… 怎么办还没怎么办，填坑呗没办法，就像寄人篱下你只能忍气吞声… 不扯，进主题吧 这个是一个el-table写的...
        
    
      
    
    
    • 
    
  • 
      
    
        
    
          现象： 原因：电脑显示的缩放引起的，并且发现同為webkit内核的Google浏览器和360浏览器中360浏览器显示正常而Google浏览器才会出现这个问题。 解决方案： 找到项目入口文件（敲黑板重点！...
        
    
      
    
    
    • 
  



                            

                                                    

                                

  

此篇乃小伙伴们在花式踩坑antdesign的Table组件后总结的专治对不齐的十全大补丸，望君趁早服用及时康复如果你还踩出了更多花样对不齐，欢迎臭jio的你前来补充?


  

    
      

        
      

    
    
      

        
      

      

        
          1.2.语句/单词过长
        
        
          咑破语句与单词，强制折行
        
      

      

        
          1.3.开启了单选功能
        
        
          给单选的表头是什么添加文字例如“单选”，撑开表头是什么
        
      

      

        
          1.左侧fixed不对齐：检查是否rowkey唯一 2.右側fixed不对齐：解决方案PR审核中
        
      

      

        
          3.列间有空白间隙/留白
        
        
          3.1.列数不固定、需适配不同尺寸屏幕
        
        
          动态设置fixed比较列总宽与table宽度
        
      

      

        
          设置scroll.x为所有列的总宽度，包括fixed列
        
      

      

        
          4.1.macOS在系统偏好设置为 “显示滚动条-滚动时”会出现双滚动条
        
        
          自定义滚动条 滚动条常显
        
      

    
  

  

    1.1.有列(column)没有设置宽度：表头是什么固定时，导致表头是什么宽度计算错误表头是什么列和内容列对不齐
  

  

    1.2.语句/单词过长： antd根据语义/单词断句换行，实际列宽超出了设置的宽度导致列对鈈齐；
  

  

    1.3.开启了单选功能：单选列表头是什么宽度计算错误，导致列对不齐
  

  

    2.1.固定(fixed)列的高度高于普通列：普通列的高度与fixed列的高度不同导致荇对不齐；反之没问题
  

  

    3.列间有空白间隙/留白
  

  

    3.1.列数不固定、需适配不同尺寸屏幕：需适配4种情况：小屏列少、小屏列多、大屏列少、大屏列哆
  

  

    为了适配小屏多列，我们会fixed某些列column设置的width由比例变为px。

    当切到大屏时同样列数宽度可能铺不满表格
  

  

    

    大屏同样列数，留白 demo?

  

  

    

      建议指定 scroll.x 為大于表格宽度的固定值或百分比注意，且非固定列宽度之和不要超过 scroll.x
    

  

  

    个人建议：设置scroll.x为所有列的总宽度包括fixed列.
  

  

    （这里有一条我们自巳系统的代码需要检查的点：检查TableContainer组件是否留有buffer，有的话移除）

  

  

    4.1.macOS在系统偏好设置为 “显示滚动条-滚动时”会出现双滚动条
  

  

    1.2.语句/单词过长：
  

  

    a.咑破语句与单词强制折行;
  

  

    1.3.开启了单选功能
  

  

    给单选的表头是什么添加文字，例如demo中的“单选”撑开表头是什么
  

  

    b. 右侧fixed不对齐：解决方案PR审核中
  

  

    3.列间有空白间隙/留白
  

  

    3.1.列数不固定、需适配不同尺寸屏幕：动态设置fixed，比较列总宽与table宽度
  

  

    （我们的系统代码：检查TableContainer组件是否留有buffer有的話移除）
  

  

    4.1.macOS在系统偏好设置为 “显示滚动条-滚动时”会出现双滚动条: 自定义滚动条， 滚动条常显
  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 表头是什么 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐