使用ivew里面的组件如何实现一个左右联动的选择器并实现接口数据联调尼？

Question

效果图：先点击左侧选专业再点击右侧选人员，

数据格式：

{
  "data": [
    {
      "proId": "891921585005400064",
      "proName": "建筑",
      "user": [        {
          "id": "57074370396161",
          "name": "张三",
          "dep": "A部门"
        }      ]
    },
    {
      "proId": "891921585026371584",
      "proName": "结构",
      "user": [        {
          "id": "423757074370396161",
          "name": "李四",
          "dep": "B部门"
        }      ]
    }
  ],
  "success": true,
  "code": 200,
  "message": "操作成功"
}

如何实现数据联动的功能尼？

Answer 1

proId 找 id 简单，id反找 proId就得算了，每次都算稍显麻烦，建议额外准备个变量例： ids。

let ids = {}
for (let index = 0; index < proIds.length; index++) {
    const users = proIds[index].user;
    for (let counter = 0; counter < users.length; counter++) {
        const item = users[counter];
        if(ids[item.id]){
            ids[item.id] = [users.proId]
        }else{
            ids[item.id].push(users.proId)
            ids[item.id] = Array.from(new Set(ids[item.id]))
        }
    }
}

差不多这个意思，有点仓促，题主再把代码优化下吧

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 2

换个交互 比如select tree