vue2使用table进行单元格合并,后面列合并需根据前某列条件合并

发布时间 2023-08-11 14:51:05作者: 保洁叔叔

示例:

<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;
        }
}