先放代码
style="transform: scale(2); transform-origin: left top"
需求
最近遇到了一个小需求，就是在一个大屏显示面板中，滚动显示2*2的数据，但是当最后一页只有一条数据的时候，让数据填充整个面板。
思路一：通过监听数据，切换两套子组件样式，最后感觉写两套组件样式有点累，放弃。
思路二：通过监听数据，切换子组件整体的缩放倍数，使用tansform：scale(2)这样的一个css样式来放大倍数会出现新的问题，直接使用是在本体放大，类似于扩大的效果，并没有出现在父元素的中心，但这不是我们想要的，所以需要改变变换的基点，也就是transform-origin: left top，将变换基点修改为左上角。
<div v-if="Data.length > 1" class="grid grid-cols-2 grid-rows-2 flex-1 pl-4">
<component v-for="item in Data" :key="item.id" :info="item" />
</div>
<div v-else class="grid grid-cols-2 grid-rows-2 flex-1 pl-6">
<component class="" :info="Data[0]" style="transform: scale(2); transform-origin: left top" />
</div>
本文仅作为日常笔记使用，欢迎大佬们提出指导意见
