vue2使用table进行单元格合并,后面列合并需根据前某列条件合并
示例:
<table class="table_style"> <thead> <tr> <td>姓名</td> <td>年龄</td> <td>车辆</td> <td>房子</td> <td>身份</td> </tr> </thead> <tbody v-for="(group, name) in groupedData" :key="name"> <template v-for="(item, index) in group"> <tr :key="`${name}_${index}`"> <template v-if="index === 0 || group[index - 1].name !== item.name"> <td :rowspan="getNameRowCount(name)">{{ item.name }}</td> </template> <template v-if="index === 0 || group[index - 1].age !== item.age"> <td :rowspan="getAgeRowCount(group, index)">{{ item.age }}</td> </template> <template v-if="index === 0 || group[index - 1].car !== item.car || group[index - 1].name !== item.name || group[index - 1].age !== item.age"> <td :rowspan="getCarRowCount(group, index)">{{ item.car }}</td> </template> <td>{{ item.home }}</td> <td>{{ item.identity }}</td> </tr> </template> </tbody> </table>
data() { return { mergeData:[ { name:'小明', age:20, car:'大牛', home:'别墅', identity:'平民', }, { name:'小明', age:20, car:'大牛', home:'别墅', identity:'平民', }, { name:'小明', age:30, car:'奔驰', home:'别墅', identity:'平民', }, { name:'小明', age:30, car:'奔驰', home:'别墅', identity:'平民', }, { name:'小李', age:20, car:'大牛', home:'别墅', identity:'平民', }, { name:'小张', age:20, car:'大牛', home:'别墅', identity:'平民', }, { name:'小张', age:30, car:'大牛', home:'别墅', identity:'平民', }, ] }; }, computed: { groupedData() { const groups = {}; for (const item of this.mergeData) { if (!groups[item.name]) { groups[item.name] = []; } groups[item.name].push(item); } return Object.values(groups); }, }, methods: { getNameRowCount(name) { const group = this.groupedData.find(group => group[0].name === name); return group ? group.length : 0; }, getAgeRowCount(group, index) { let count = 0; for (let i = index; i < group.length; i++) { if (group[i].age === group[index].age && group[i].name === group[index].name) { count++; } else { break; } } return count; }, getCarRowCount(group, index) { let count = 0; for (let i = index; i < group.length; i++) { if (group[i].car === group[index].car && group[i].name === group[index].name && group[i].age === group[index].age) { count++; } else { break; } } return count; } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通