美文网首页
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