前后端关于多维嵌套对象数组数据的处理

前端在界面上要展示一个三维的对象数组选项列表：

前后端关于多维嵌套对象数组数据的处理

后端底层定义的是一个枚举类型：

enum Permission {
// 周转物    周转物列表
PERMISSION_XXX_YYY_ZZZ_20 = 20; // 查看周转物
PERMISSION_XXX_YYY_ZZZ_21 = 21; // 新建周转物
PERMISSION_XXX_YYY_ZZZ_22 = 22; // 编辑周转物
PERMISSION_XXX_YYY_ZZZ_23 = 23; // 删除周转物
// 周转物    借出归还记录
PERMISSION_XXX_YYY_ZZZ_30 = 30; // 查看借出条目
PERMISSION_XXX_YYY_ZZZ_31 = 31; // 新建借出条目
PERMISSION_XXX_YYY_ZZZ_32 = 32; // 编辑借出条目
PERMISSION_XXX_YYY_ZZZ_33 = 33; // 删除借出条目
...
}

后端枚举的命名规范是根据他们微服务的模块来命名的。目前我的想法是前端定义一个三维对象数组，来达到和后端的枚举值一一对应：

interface PermissionOption {
text: string
value: string
children: {
text: string
value: string
children: { text: string; value: string }[]
}[]
}
export const permissionOptionList: PermissionOption[] = [
{
text: '周转物',
value: 'product',
children: [
{
text: '周转物列表',
value: 'product_quotation',
children: [
{ text: '查看周转物', value: 'PERMISSION_XXX_YYY_ZZZ_20' },
{ text: '新建周转物', value: 'PERMISSION_XXX_YYY_ZZZ_21' },
{ text: '编辑周转物', value: 'PERMISSION_XXX_YYY_ZZZ_22' },
{ text: '删除周转物', value: 'PERMISSION_XXX_YYY_ZZZ_23' },
],
},
{
text: '借出归还记录',
value: 'product_product',
children: [
{ text: '查看借出条目', value: 'PERMISSION_XXX_YYY_ZZZ_30' },
{ text: '新建借出条目', value: 'PERMISSION_XXX_YYY_ZZZ_31' },
{ text: '编辑借出条目', value: 'PERMISSION_XXX_YYY_ZZZ_32' },
{ text: '删除借出条目', value: 'PERMISSION_XXX_YYY_ZZZ_34' },
],
},
],
}
]

但是这样做的问题是这个选项列表很长，前端这样去定义一个三维对象数组很累。而且当界面的选项需要做改动的时候，前后端要维护两套数据，感觉不太好。请问有什么更好的解决方案吗？

回答

  1. 尽量保持数据源统一：
    既然后端也要用，那就统一放后端维护吧。让后端提供个接口以供前端调用获取这些数据。

  2. 如果后端下发这些数据，那下发数据的结构要看前端怎么使用这些数据。看题目貌似前端需要一个树状的结构：

    • 如果你说服了后端小哥哥直接提供树状结构的数据，那就奉上一杯咖啡；

    • 如果后端不能提供树状结构的数据，那就前端自己处理下格式吧，可以考虑使用缓存技术缓存下转化后的结果。

以上是 前后端关于多维嵌套对象数组数据的处理 的全部内容， 来源链接： utcz.com/a/66336.html

回到顶部