目录
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
最终解决效果:
<div class="wait-to-done">
<ul class="left-content">
<li>12344</li>
</ul>
<div class="right-content">
<div ref="OCHeader" class="header">/div>
<a-table size="small" :columns="tableShowColumn" :data-source="tableData"
:rowKey="(record, index) => { return index}"
:loading="tableLoading" :pagination="false"
:scroll="{x:'max-content',y: tableHeight }"
:row-selection="{ selectedRowKeys: selectedRowKeys,
onChange: changeSelectData, fixed: true}">
</a-table>
</div>
<div ref="OCFooter" class="footer-box">footer</div>
</div>
// 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; // 重点!!!!左侧侧边栏固定宽度精准时可不加
}