示例:
<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; } }
标签:index,group,某列,car,age,单元格,合并,item,name From: https://www.cnblogs.com/webway/p/17622966.html