美文网首页
element cascader多选 传单值回显问题

element cascader多选 传单值回显问题

作者: A_dfa4 | 来源:发表于2021-03-18 18:52 被阅读0次

    未优化

      let cascaderCateId = "10, 11";
              // let cascaderCateId = "7, 8";
              this.categoryList.forEach((it) => {
                cascaderCateId.split(',').forEach((cit) => {
                  if (it.id == cit) {
                    arr.push([it.id])
                  }
    
                  it.children && it.children.forEach((it2) => {
                    if (it2.id == cit) {
                      arr.push([it.id, it2.id])
                    }
    
                    it2.children && it2.children.forEach((it3) => {
                      if (it3.id == cit) {
                        arr.push([it.id, it3.id])
                      }
    
                    })
                  })
                })
    
              })
    

    已优化

      this.cascaderCateId = this.checkedCascaderHandle(this.categoryList, cascaderCateId)
          checkedCascaderHandle (optionList, checkedIds = []) {
            // optionList Cascader 渲染的列表
            // checkedIds 返回的 选中的ids数组
            let arr = []
    
            optionList.forEach((it) => {
              let ids = []
              ids.push(it.id)
              checkedIds.split(',').forEach((cit) => {
                cit = Number(cit)
                if (it.id == cit) {
                  arr.push(ids)
                }
                this.getCheckedParentId(it, cit, it, arr, ids)
              })
            })
    
            return arr
          },
    
          getCheckedParentId(option, current, rootItem, arr, ids = []) {
            option.children && option.children.forEach((item) => {
              item.ids = JSON.parse(JSON.stringify(ids))
              item.ids && item.ids.push(item.id)
              if (item.id == current) {
                arr.push(item.ids)
              }
              this.getCheckedParentId(item, current, rootItem, arr, item.ids)
            })
          },
    

    我的数据

     let cascaderCateId = "10, 11";
    optionList = [
            {
                "categoryName":"IT",
                "hasNext":0,
                "id":1
            },
            {
                "categoryName":"办公用品",
                "children":[
                    {
                        "categoryName":"A4纸",
                        "children":[
                            {
                                "categoryName":"白色",
                                "hasNext":0,
                                "id":10
                            },
                            {
                                "categoryName":"黑色",
                                "hasNext":0,
                                "id":11
                            }
                        ],
                        "hasNext":1,
                        "id":7
                    },
                    {
                        "categoryName":"写字笔",
                        "hasNext":0,
                        "id":8
                    }
                ],
                "hasNext":1,
                "id":2
            },
            {
                "categoryName":"112",
                "hasNext":0,
                "id":9
            }
        ]
    

    相关文章

      网友评论

          本文标题:element cascader多选 传单值回显问题

          本文链接:https://www.haomeiwen.com/subject/mdzucltx.html