Vue嵌套v-for内层不渲染元素仅获取class属性的解决方案

• Vue两层嵌套v-for循环场景下，如果内层循环的作用仅仅是读取配置值给外层渲染项绑定class，不需要渲染内层循环挂载的DOM元素时，默认写法会让内层循环每一次迭代都生成自身对应的DOM节点，直接造成布局结构断裂、渲染内容重复的问题。
• 目标效果：读取配置数组里存储的列宽值，将值作为动态class绑定到实际需要渲染的列表项上，实现列宽配置和渲染内容一一对应，不产生多余的嵌套DOM节点。

核心逻辑是使用Vue内置的<template>标签作为内层循环的挂载载体，<template>属于虚拟占位节点，编译渲染阶段不会生成真实的DOM元素，完全不会破坏原有布局结构。

错误写法参考 #

以下写法会生成多余内层div，直接打乱布局：

<div class="content-row" v-for="(row, rIdx) in tableData" :key="rIdx">
  <!-- 内层div会随循环被重复渲染，产生多余DOM层级 -->
  <div 
    v-for="(width, cIdx) in colWidthConfig" 
    :key="cIdx"
    :class="`width-${width}`"
  >
    {{ row[cIdx] }}
  </div>
</div>

正确写法 #

用<template>承载内层循环，无多余DOM生成：

<div class="content-row" v-for="(row, rIdx) in tableData" :key="rIdx">
  <!-- template仅做循环占位，不会渲染为真实DOM -->
  <template v-for="(width, cIdx) in colWidthConfig" :key="cIdx">
    <div :class="`width-${width}`">
      {{ row[cIdx] }}
    </div>
  </template>
</div>

兼容提示：Vue3支持直接在<template>标签上绑定key属性，如果是Vue2项目遇到语法校验报错，把key属性移动到内层真实渲染的div元素上即可。

简化写法 #

如果列宽配置和渲染内容的索引是严格一一对应的，完全可以去掉内层循环，直接通过索引读取对应宽度值绑定class，减少循环嵌套：

<div class="content-row" v-for="(row, rIdx) in tableData" :key="rIdx">
  <div 
    v-for="(cell, cIdx) in row" 
    :key="cIdx"
    :class="`width-${colWidthConfig[cIdx]}`"
  >
    {{ cell }}
  </div>
</div>

内容的提问来源于stack exchange，提问作者Tobias Rauer