vue3 数据逻辑处理将同一个对应的id 的区分出来

最新推荐文章于 2024-07-22 15:19:55 发布

唱一首情歌.

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量212

点赞数 1

分类专栏：前端经验笔记文章标签：前端 javascript 开发语言 vue.js vue

本文链接：https://blog.csdn.net/lele66688888/article/details/139746716

版权

前端经验同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

笔记

26 篇文章 0 订阅

订阅专栏

先上代码

   const groupedOptions = {} // 使用对象来存储分组结果
       data.list.forEach(item => {
// 遍历 groupList.value，检查是否有匹配的 id
        groupList.value.forEach(group => {
           if (group.id === item.groupId) {
             // 如果 group.id 在 groupedOptions 中不存在，则初始化它
             if (!groupedOptions[group.groupName]) {
             groupedOptions[group.groupName] = []
             }
             // 将当前 item 添加到匹配的组中
             groupedOptions[group.groupName].push({
               value: item.id,
               label: item.nickName,
             })
           }
         })
       })
       // 将 groupedOptions 转换为 options.value 所需的格式
      options.value = Object.keys(groupedOptions).map(groupName => ({
         label: groupName,
        options: groupedOptions[groupName],
       }))

我这个主要处理这个问题（groupList）

[
    {
        "id": "1",
        "groupName": "xxx",
        "userId": "1251139989602463744",
        "createTime": "1718594337191",
        "updateTime": "1718594337191",
        "channel": 3
    },
    {
        "id": "2",
        "groupName": "bbb",
        "userId": "1251139989602463744",
        "createTime": "1718441669851",
        "updateTime": "1718441669851",
        "channel": 3
    },
    {
        "id": "3",
        "groupName": "ccc",
        "userId": "1251139989602463744",
        "createTime": "1718441665340",
        "updateTime": "1718441665340",
        "channel": 3
    }
]

data.list

[
    {
        "id": "1252211435414130688",
        "nickName": "闪电票务",
        
        "groupId": "1",
        "customerId": "0",
     
        
    {
        "id": "1251590257989292032",
        "nickName": "xxx",
      
        "groupId": "1",
        
    },
 {
        "id": "1251590257989292032",
        "nickName": "ccc",
      
        "groupId": "3",
        
    },
   
 {
        "id": "1251590257989292032",
        "nickName": "xxx",
      
        "groupId": "2",
        
    },
   
 {
        "id": "1251590257989292032",
        "nickName": "xxx",
      
        "groupId": "2",
        
    },
   
 {
        "id": "1251590257989292032",
        "nickName": "xxx",
      
        "groupId": "3",
        
    },
   
   
  
]

把这个分组一下放在一起变成这样的数据

[
      {
        label: 'Manager',
        options: [
          {
            value: 'jack',
            label: 'Jack',
          },
          {
            value: 'lucy',
            label: 'Lucy',
          },
        ],
      },
      {
        label: 'Engineer',
        options: [
          {
            value: 'yiminghe',
            label: 'Yiminghe',
          },
        ],
      },
    ]