Javascript 从三个对象创建转置表的有效方法

我有三个目标：

用户

[
    {
        id: 1,
        name: 'User'
    },
    {
        id:2,
        name: 'User2'
    }
]

[
    {
        id: 1,
        name: 'Page'
    },
    {
        id:2,
        name: 'Page2'
    }
]

[
    {
        user_id: 1,
        page_id: 1,
        access: 'rw'
    },
    {
        user_id: 1,
        page_id: 2,
        access: 'ro'
    },
    {
        user_id: 2,
        page_id: 1,
        access: 'rw'
    },
]

页面

[
    {
        id: 1,
        name: 'User'
    },
    {
        id:2,
        name: 'User2'
    }
]

[
    {
        id: 1,
        name: 'Page'
    },
    {
        id:2,
        name: 'Page2'
    }
]

[
    {
        user_id: 1,
        page_id: 1,
        access: 'rw'
    },
    {
        user_id: 1,
        page_id: 2,
        access: 'ro'
    },
    {
        user_id: 2,
        page_id: 1,
        access: 'rw'
    },
]

权利

[
    {
        id: 1,
        name: 'User'
    },
    {
        id:2,
        name: 'User2'
    }
]

[
    {
        id: 1,
        name: 'Page'
    },
    {
        id:2,
        name: 'Page2'
    }
]

[
    {
        user_id: 1,
        page_id: 1,
        access: 'rw'
    },
    {
        user_id: 1,
        page_id: 2,
        access: 'ro'
    },
    {
        user_id: 2,
        page_id: 1,
        access: 'rw'
    },
]

我需要做的是显示组合数据的单个表格，但表格必须能够转置，并且我需要能够编辑每个单元格的值（权限），并且更改应该反映在所有地方

这是当前的原型，您可以看到它的外观：

目前，我创建了两个单独的对象，其中包含填充每个表的数据，然后简单地显示/隐藏表（转置）。这相当复杂，也不容易处理，因为我需要能够编辑单元格中的值，并且需要在转置中反映更改

---

如果您能给我一些建议，我将不胜感激。

这是一个有趣的问题。试一试：

Html:

在这里工作：非常有趣的解决方案！（我没有在这个问题上投反对票…）现在唯一的问题是性能，整个应用程序变得非常慢，因为一直在评估getRight（）。此外，单元格的背景颜色由该函数的返回决定，因此要使其工作，我必须执行两次。。。有没有办法解决这个问题？