橘猫敲代码 2023-03-29 10:46 采纳率: 66.2%
浏览 29
已结题

级联组件动态获取数据问题

级联选择器 点击下一级获取数据。

img


正常是这种,点击一级数据调出来二级数据,但是如果我再点击一下一级数据,(这里可能是因为调用了两次接口的原因)就会渲染两遍二级数据

img


接口获取的就是下一级数据。


```html

   <el-cascader ref="cascader" :options="newCountryList" :props="{ checkStrictly: true }" @change="countryId"
            @expand-change="arrayList" clearable v-model="ruleForm.countryId"></el-cascader>

  countryId(a) {
        a = a.slice(-1)
        let obj = {
          parentId: a.toString()
        }
        let second = []
        let third = []
        getAllCountryList(obj).then(res => {
          let list = res
          console.log(res) //下级数据
          list.forEach(element => {
            if (element.divisionLevel == 2) {
              let children = {
                value: element.id,
                label: element.divisionChnName,
                parentId: element.parentId,
                children: []
              }
              second.push(children)
            } else if (element.divisionLevel == 3) {
              let childrens = {
                value: element.id,
                label: element.divisionChnName,
                parentId: element.parentId,
              }
              third.push(childrens)
            }
          })
          console.log(second)
          console.log(third)
          for (let item of this.newCountryList) {
            for (let son of second) {
              if (item.value === son.parentId) {
                item.children.push({
                  value: son.value,
                  label: son.label,
                  children: son.children,
                  parentId: son.parentId
                })
              }
            }
          } //二级进一级

          // for(let item of this.newCountryList){
          //   for(let i of item.children){
          //     for(let j of third){
          //       if(i.value==j.parentId){
          //         i.children.push({
          //           value: j.value,
          //           label: j.label
          //         })
          //       }
          //     }
          //   }
          // }
          let two = []
          for (let item of this.newCountryList) {
            console.error(item.children)
            // two.push(item.children)
            two = item.children
          }
          console.warn(two,'二级二级')
          for (let i of two) {
            for (let j of third) {
              if (i.value == j.parentId) {
                i.children.push({
                  value: j.value,
                  label: j.label
                })
              }
            }
          }

```

  • 写回答

3条回答 默认 最新

  • 发狂精灵 2023-03-29 11:01
    关注

    是不是你每次点击的时候没有先清空在赋值而是直接push添加了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 4月11日
  • 已采纳回答 4月3日
  • 创建了问题 3月29日

悬赏问题

  • ¥15 三因素重复测量数据R语句编写,不存在交互作用
  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表