最近項目中有個細節，需要動態計算寬高，按照用戶選擇項進行固定行以及固定列的展示，用戶可選擇項有1，4，9，16，32，48，需在一屏內展示完，如果返回列表超過48，則只展示前48張，反之亦然。
我的思路大致這樣：外層div包裹內層循環列表，超過當前窗口則overflow:hidden；里面循環列表每個都動態計算寬高，首先列好相應行數以及列數枚舉值：
//r表示行數，c表示列數
//imgNum為當前下拉列表選中項
//--afterWidth為變量,需提前在data中聲明，我默認給0
<div class="card-list" :style=" {
overflow: 'hidden',
height: maxHeight + 'px',
width: maxWidth + 'px',
'--afterWidth': afterWidth
}">
<el-card
v-for="(item,index) in dataList"
:key="index"
:body-style="bodyStyle"
shadow="hover"
:style="{
margin: '5px 0 0 5px',
width: ( maxWidth / layout[imgNum].c - 7) + 'px',
height: ( maxHeight - 5 * layout[imgNum].r ) / layout[imgNum].r + 'px',
}"
>
...內容
</el-card>
data() {
return {
maxHeight： 0，//當前窗口高度
maxWidth： 0，//當前窗口寬度
afterWidth: 0,
dataList: [], //所需渲染列表，可自行模擬數據
}
}
//利用flex布局，滿行排列自動平分間距，排列不滿左側對齊，但是我發現flex：auto會有幾像素差距，所以給偽元素中設置高度，需要在scss中獲取vue中data里變量，特此記錄一下
<style lang="scss" scoped>
.card-list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
&::after{
content: "";
display: block;
width: var(--afterWidth);
//flex: auto;
}
}
</style>
ps：效果如下
