卡片每行列数由容器宽除以卡片宽向下取整得出，需用computed缓存响应式计算结果；核心是Math.floor(containerWidth.value / cardWidth.value)，并用Math.max(1, ...)确保至少1列。
卡片列表每行显示数量的计算，本质是根据容器宽度和单张卡片宽度，动态算出整数个数。computed 正适合这种依赖响应式尺寸、需缓存且频繁读取的场景。
核心逻辑：用容器宽 ÷ 卡片宽，向下取整
关键点不是写死列数，而是让列数随容器变化自动调整。比如容器 1200px、卡片 280px，结果就是 Math.floor(1200 / 280) === 4 行显示 4 张。
- 依赖项必须是响应式的：用 ref 或 reactive 包裹容器宽度（如从 ref 获取或监听 resize）
- 卡片宽度建议也设为响应式变量（方便主题切换或适配）
- 务必用 Math.floor，避免小数列数导致布局错乱
基础实现：固定卡片宽 + 动态容器宽
假设你通过 clientWidth 获取容器实际宽度，并封装为 containerWidth 响应式值：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 卡片宽度设为常量（如 280）：直接参与计算
-
列数计算：
const columns = computed(() => Math.floor(containerWidth.value / 280) || 1) - 加
|| 1是兜底，防止容器极窄时结果为 0
进阶处理：支持响应式卡片宽与最小列数限制
真实项目中卡片宽可能随屏幕变化（如移动端变窄），这时可把卡片宽也做成响应式：
- 定义
cardWidth = ref(280)，并在onMounted+window.addEventListener('resize')中按断点更新它 - 列数改为：
computed(() => Math.max(1, Math.floor(containerWidth.value / cardWidth.value))) -
Math.max(1, ...) 比
|| 1更明确，语义清晰
模板中使用与布局配合
计算出的 columns 可直接用于 CSS Grid 或 Flex 布局：
- Grid 示例：
grid-template-columns: repeat(v-bind:columns, minmax(0, 1fr)) - Flex 示例：给卡片容器设置
display: flex; flex-wrap: wrap;，再用:style="{ 'max-width': `${columns * cardWidth.value}px` }"控制总宽（可选） - 注意：不要在 computed 里操作 DOM 或发请求，只做纯数学计算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
