Javascript 使用vue折叠表中的单元格

我尝试使用vue.js渲染时间表表。在行中，我有一些活动（在本例中，只有一个硬编码的活动）。在colls中，我有时间段。In cells—用户的名称（如果用户计划在此时）

你可以看到，

Audrey

预定在09:00和09:30。我的vue.js组件代码如下：

<template>
    <div>
        <table>
            <thead>
            <tr>
                <th rowspan="2">Object</th>
                <th :colspan="intervals.length">
                    Intervals
                </th>
            </tr>
            <tr>
                <th v-for="(interval, id) in intervals" :key="id">
                    {{interval.name}}
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Something</td>
                <td v-for="(interval, index) in intervals" :key="index">
                    {{getCell(interval.id).user_name}}
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: 'Test',
        data () {
            return {
                intervals: [
                    {
                        "id": 1,
                        "name": "09:00:00",
                    },
                    {
                        "id": 2,
                        "name": "09:30:00",
                    },
                    {
                        "id": 3,
                        "name": "10:00:00",
                    },
                    {
                        "id": 4,
                        "name": "10:30:00",
                    },
                    {
                        "id": 5,
                        "name": "11:00:00",
                    },
                    {
                        "id": 6,
                        "name": "11:30:00",
                    },
                    {
                        "id": 7,
                        "name": "12:00:00",
                    },
                ],
                schedule: [
                    {
                        "id": 1,
                        "interval_id": 1,
                        "user_name": "Audrey",
                    },
                    {
                        "id": 2,
                        "interval_id": 2,
                        "user_name": "Audrey",
                    },
                    {
                        "id": 3,
                        "interval_id": 4,
                        "user_name": "Ann",
                    },
                    {
                        "id": 4,
                        "interval_id": 5,
                        "user_name": "Ann",
                    },
                    {
                        "id": 5,
                        "interval_id": 7,
                        "user_name": "Chad",
                    },
                ],
            }
        },
        methods: {
            getCell(interval_id) {
                return this.schedule.find(row => row.interval_id === interval_id) || {};
            },
        }
    }
</script>

<style scoped>
    table, table td, table th {
        border: 1px solid black;
        border-collapse: collapse;
    }    
</style>

对象
间隔
{{interval.name}
某物
{{getCell（interval.id）.user_name}
导出默认值{
名称：'测试'，
数据（）{
返回{
间隔时间：[
{
“id”：1，
“姓名”：“09:00:00”，
},
{
“id”：2，
“姓名”：“09:30:00”，
},
{
“id”：3，
“名称”：“10:00:00”，
},
{
“id”：4，
“姓名”：“10:30:00”，
},
{
“id”：5，
“名称”：“11:00:00”，
},
{
“id”：6，
“姓名”：“11:30:00”，
},
{
“id”：7，
“姓名”：“12:00:00”，
},
],
附表:[
{
“id”：1，
“间隔id”：1，
“用户名”：“奥黛丽”，
},
{
“id”：2，
“间隔id”：2，
“用户名”：“奥黛丽”，
},
{
“id”：3，
“间隔id”：4，
“用户名”：“安”，
},
{
“id”：4，
“间隔id”：5，
“用户名”：“安”，
},
{
“id”：5，
“间隔id”：7，
“用户名”：“乍得”，
},
],
}
},
方法：{
getCell（间隔\u id）{
返回this.schedule.find（row=>row.interval_id===interval_id）|{}；
},
}
}
表，表td，表th{
边框：1px纯黑；
边界塌陷：塌陷；
}    

间隔

数据和

计划

数据来自API。但是我想折叠

Aundrey

单元格，不显示他的（还有

Ann的

）

user\u name

两次

---

我该怎么做呢？

试试这样做

在获取表中的API之后。您可以执行一些JS代码来删除行中重复的单元格

是
是
是
这
是
某物
这
是
某物

var-test=document.getElementsByClassName（'this-test'）；
对于（var i=0；i

更新：这应该适用于多个用例：

newvue({
el:“#应用程序”，
过滤器：{
/**
*接收组的名字，如果前缀为“nobody”，则返回“”
*/
验证名称（名称）{
返回name.split（“”“）[0]===‘nobody’？“”：name
}
},
数据（）{
返回{
间隔时间：[
{
“id”：1，“name”：“09:00:00”，
},
{
“id”：2，“姓名”：“09:30:00”，
},
{
“id”：3，“name”：“10:00:00”，
},
{
“id”：4，“姓名”：“10:30:00”，
},
{
“id”：5，“姓名”：“11:00:00”，
},
{
“id”：6，“姓名”：“11:30:00”，
},
{
“id”：7，“name”：“12:00:00”，
},
],
附表一：[
{
“id”：1，“interval\u id”：1，“用户名”：“Audrey”，
},
{
“id”：2，“interval\u id”：2，“用户名”：“Audrey”，
},
{
“id”：3，“interval\u id”：4，“user\u name”：“Ann”，
},
{
“id”：4，“interval\u id”：5，“user\u name”：“Ann”，
},
{
“id”：5，“间隔id”：7，“用户名”：“乍得”，
}
],
附表二：[
{
“id”：1，“interval\u id”：1，“用户名”：“Audrey”，
},
{
“id”：2，“interval\u id”：2，“用户名”：“Audrey”，
},
{
“id”：3，“interval\u id”：3，“用户名”：“Audrey”，
},
{
“id”：4，“interval\u id”：5，“user\u name”：“Ann”，
},
{
“id”：5，“间隔id”：7，“用户名”：“乍得”，
}
],
附表三：[
{
“id”：1，“interval\u id”：1，“用户名”：“Audrey”，
},
{
“id”：2，“interval\u id”：2，“user\u name”：“Ann”，
},
{
“id”：3，“interval\u id”：4，“user\u name”：“Ann”，
},
{
“id”：4，“间隔id”：6，“用户名”：“乍得”，
},
{
“id”：5，“间隔id”：7，“用户名”：“乍得”，
}
],
附表四：[
{
“id”：1，“间隔”
<tr>
    <td>Something</td>
    <td v-for="(span, index) in scheduleSpans" :key="index" :colspan="span[1]">
        {{span[0]}}
    </td>
</tr>

computed: {
    scheduleSpans() {
        return this.intervals.reduce((scheduleSpans, interval) => {
            const scheduleEntry = 
                this.schedule.find(entry => entry.interval_id === interval.id);
            const userName = scheduleEntry ? scheduleEntry.user_name : '';

            if (scheduleSpans.length === 0) scheduleSpans[0] = [userName, 0];
            if (scheduleSpans[scheduleSpans.length - 1][0] !== userName) {
                scheduleSpans[scheduleSpans.length] = [userName, 0];
            }
            scheduleSpans[scheduleSpans.length - 1][1] = 
                scheduleSpans[scheduleSpans.length - 1][1] + 1;

            return scheduleSpans;
        }, []);
    }
},
/*
methods: {
    getCell(interval_id) {
        return this.schedule.find(row => row.interval_id === interval_id) || {};
    },
}
*/

[["Audrey",2],["",1],["Ann",2],["",1],["Chad",1]]

<tr>
    <td>Something</td>
    <td v-for="(span, index) in schedulePairs" :key="index" :colspan="span[1]">
        {{span[0]}}
    </td>
</tr>

schedule: [
    {
        "id": 1,
        "interval_id": 1,
        "user_name": "Audrey",
    },
    {
        "id": 2,
        "interval_id": 2,
        "user_name": "Audrey",
    },
    {
        "id": 3,
        "interval_id": 4,
        "user_name": "Ann",
    },
    {
        "id": 5,
        "interval_id": 7,
        "user_name": "Chad",
    },
]

computed: {
    schedulePairs() {
        // Returns a data structure, specifically an array of arrays with two values ("pairs")
        // Each pair containing the user name and the number of columns that value should span
        return this.intervals.reduce((pairs, interval) => {
            const scheduleEntry = this.schedule.find(entry => 
                entry.interval_id === interval.id
            );
            const userName = scheduleEntry ? scheduleEntry.user_name : '';

            // Push new pair with colspan of zero (incremented below if's) on first iteration
            if (pairs.length === 0) pairs.push([userName, 0]);

            // Also push new pair is userName is empty or isn't the same as for last pair
            if (userName === '' || lastPair()[0] !== userName) pairs.push([userName, 0]);

            lastPair()[1] = lastPair()[1] + 1;
            return pairs;

            // Cleaner than repeating  pairs[pairs.length - 1]
            function lastPair() { return pairs[pairs.length - 1] }
        }, []);
    }
}