vue循环遍历展示table

### Vue.js 中使用 `v-for` 遍历数组渲染表格 在 Vue.js 开发中，`v-for` 是一种非常强大且灵活的指令，用于基于一组数据项来渲染元素列表。当需要将数组中的数据渲染成 HTML 表格时，可以通过 `v-for` 来实现每一行的数据绑定。 以下是详细的实现方式： #### 示例代码 以下是一个完整的示例，展示了如何通过 `v-for` 指令遍历数组并将数据渲染为 `<table>` 结构[^1]。 ```html <template> <div> <!-- 定义表格 --> <table border="1"> <thead> <tr> <th>#</th> <!-- 序号 --> <th>Name</th> <th>Age</th> <th>Children Names</th> </tr> </thead> <tbody> <!-- 外层循环父级数据 --> <tr v-for="(item, index) in tableData" :key="item.id"> <td>{{ index + 1 }}</td> <!-- 显示序号 --> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td> <!-- 内层循环子级数据 --> <span v-if="item.children && item.children.length > 0"> {{ item.children.map(child => child.childName).join(', ') }} </span> <span v-else>-</span> </td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { // 表格数据结构 tableData: [ { id: 1, name: 'Alice', age: 25, children: [{ childName: 'Charlie' }, { childName: 'David' }] }, { id: 2, name: 'Bob', age: 30, children: [] }, { id: 3, name: 'Eve', age: 22, children: [{ childName: 'Frank' }] } ] }; } }; </script> ``` --- #### 关键点解析 1. **外层循环** 使用 `v-for="(item, index) in tableData"` 对顶层数据进行迭代，并通过 `:key="item.id"` 设置唯一的 key 值以优化性能[^3]。 2. **显示序号** 利用索引变量 `index` 动态生成序号，即 `{{ index + 1 }}`[^2]。 3. **内层循环嵌套数据** 如果某字段（如 `children`）本身也是一个数组，则可以在同一单元格内再次调用 `map()` 方法将其扁平化并拼接字符串[^4]。 4. **条件判断** 当某些情况下可能不存在嵌套数据时（例如 `children` 数组为空），可通过 `v-if` 或三元运算符优雅地处理缺失值的情况。 --- #### 合并单元格功能扩展 如果需要动态合并具有相同值的单元格，可以借助 JavaScript 计算出哪些行应该被合并，并设置相应的 rowspan 属性。下面是一段简单的逻辑演示： ```javascript computed: { mergedTableData() { let result = []; this.tableData.forEach((row, rowIndex) => { if (result.length === 0 || row.name !== result[result.length - 1].name) { result.push({ ...row, count: 1 }); } else { result[result.length - 1].count += 1; result[result.length - 1].age = ''; // 清空重复部分的内容 } }); return result; } } ``` 随后，在模板中应用这些计算后的数据即可完成合并效果。 --- ###