antd表格a-table滚动失效。x轴滚动失效

目录

antd表格a-table滚动失效。x轴滚动失效

页面html代码如下。实现左右布局，左边侧边栏固定宽度，右边沾满剩余宽度

解决方案：在计算右侧宽度时，左边侧边栏固定宽度，右边沾满剩余宽度

情况1：左侧侧边栏宽度是动态的话，单独使用计算witdh可能会在屏幕变化时出现右侧留白，flex-grow：1，解决留白问题。

最终解决效果： 

---

antd表格a-table滚动失效。x轴滚动失效

页面html代码如下。实现左右布局，左边侧边栏固定宽度，右边沾满剩余宽度

目录

antd表格a-table滚动失效。x轴滚动失效

页面html代码如下。实现左右布局，左边侧边栏固定宽度，右边沾满剩余宽度

解决方案：在计算右侧宽度时，左边侧边栏固定宽度，右边沾满剩余宽度

情况1：左侧侧边栏宽度是动态的话，单独使用计算witdh可能会在屏幕变化时出现右侧留白，flex-grow：1，解决留白问题。

情况2:  左侧侧边栏固定宽度，可以单独使用动态计算width

最终解决效果： 

---

 

    

      
12344
    
    

      
/div>
      
        
      
      
footer
  
// css 实现左右布局
wait-to-done {
  padding: 20px;
  display: flex;
  height: calc(100vh - 120px);
  .left-content {
    width: 175px;
    text-align: center;
    flex-shrink: 0;
    border-right: 1px solid #E8E8E8;
    li{
      line-height: 36px;
      margin: 10px 10px 10px 0;
      padding: 0 10px;
      cursor: pointer;
    }
  }
  .right-content {
    padding: 10px;
    flex-grow: 1;
  }

这样实现左右布局时，表格表头过多时antdesign的x轴滚动失效，表格长度不受

:scroll="{x:'max-content'}" 的控制。宽度过长但滚动失效

解决方案：在计算右侧宽度时，左边侧边栏固定宽度，右边沾满剩余宽度

情况1：左侧侧边栏宽度是动态的话，单独使用计算witdh可能会在屏幕变化时出现右侧留白，flex-grow：1，解决留白问题。

// 如果左侧侧边栏不固定宽度，解决方案  

.right-content {
    padding: 10px;
    width: calc(100% - 300px);  // 重点！！！！300px可以是左侧初始化宽度
    flex-grow: 1; // 重点！！！！左侧侧边栏固定宽度精准时可不加
  }

最终解决效果：