element-ui中级联选择器Cascader使用中遇到的意想不到的空白

痛定思痛。 2023-02-16 15:24 4阅读 0赞

### 事故现场 ###

如题，笔者在使用**级联选择器**的时候，明明选中了选项，但是页面并没有展示，而是**展示为空**，如下图所示  
![选中后出现显示异常][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Jvcnkz_size_16_color_FFFFFF_t_70]

### 寻找原因 ###

控制台打印出来的所有数据都是没有问题的，绑定的model也显示正常，折让我百思不得其解，最后只能请教我们公司的前端大神，大神帮我看后，看到控制台打印的信息，直接说绑定的value值重复了，系统渲染不明白了。  
比如，我处理后的data如下图所示

[
      { 
        "value": 1,
        "label": "仓库#1",
        "children": [
          { 
            "value": 1,
            "label": "物料1"
          },
          { 
            "value": 2,
            "label": "物料2"
          },
          { 
            "value": 4,
            "label": "物料3"
          },
          { 
            "value": 19,
            "label": "物料8"
          },
          { 
            "value": 21,
            "label": "物料10"
          },
          { 
            "value": 24,
            "label": "物料14"
          },
          { 
            "value": 25,
            "label": "物料15"
          }
        ]
      },
      { 
        "value": 2,
        "label": "仓库#2",
        "children": [
          { 
            "value": 1,
            "label": "物料1"
          },
          { 
            "value": 2,
            "label": "物料2"
          },
          { 
            "value": 4,
            "label": "物料3"
          },
          { 
            "value": 19,
            "label": "物料8"
          },
          { 
            "value": 24,
            "label": "物料14"
          },
          { 
            "value": 25,
            "label": "物料15"
          }
        ]
      },
      { 
        "value": 3,
        "label": "仓库#3",
        "children": [
          { 
            "value": 1,
            "label": "物料1"
          }
        ]
      },
      { 
        "value": 4,
        "label": "仓库#4",
        "children": [
          { 
            "value": 1,
            "label": "物料1"
          },
          { 
            "value": 5,
            "label": "物料4"
          }
        ]
      },
      { 
        "value": 5,
        "label": "仓库#5",
        "children": [
          { 
            "value": 2,
            "label": "物料2"
          },
          { 
            "value": 18,
            "label": "物料7"
          }
        ]
      },
      { 
        "value": 6,
        "label": "仓库#6",
        "children": [
          { 
            "value": 19,
            "label": "物料8"
          }
        ]
      },
      { 
        "value": 7,
        "label": "测试盘点",
        "children": [
          { 
            "value": 1,
            "label": "物料1"
          },
          { 
            "value": 19,
            "label": "物料8"
          }
        ]
      }
    ]

乍一看，这些数据没什么问题，各自对应的下级也都正常，  
大神的意思是这样不行，**value不能重复**，即如果选择后有\[1,2\]这样的数据后，就不能出现\[2,1\]这样的格式，要不然组件渲染不明白，修改后给第一级value加了个字母**P**前缀，给子级加了个字母**C**前缀，依然不行，因为此时虽然不会出现上吗的情况了，但是不同的children中还是会有相同的value，好家伙，这是要所有的value都唯一啊，这样才能识别。  
于是就改成了下面这样的

[
      { 
        "value": "P1",
        "label": "仓库#1",
        "children": [
          { 
            "value": "C0_1",
            "label": "物料1"
          },
          { 
            "value": "C0_2",
            "label": "物料2"
          },
          { 
            "value": "C0_4",
            "label": "物料3"
          },
          { 
            "value": "C0_19",
            "label": "物料8"
          },
          { 
            "value": "C0_21",
            "label": "物料10"
          },
          { 
            "value": "C0_24",
            "label": "物料14"
          },
          { 
            "value": "C0_25",
            "label": "物料15"
          }
        ]
      },
      { 
        "value": "P2",
        "label": "仓库#2",
        "children": [
          { 
            "value": "C1_1",
            "label": "物料1"
          },
          { 
            "value": "C1_2",
            "label": "物料2"
          },
          { 
            "value": "C1_4",
            "label": "物料3"
          },
          { 
            "value": "C1_19",
            "label": "物料8"
          },
          { 
            "value": "C1_24",
            "label": "物料14"
          },
          { 
            "value": "C1_25",
            "label": "物料15"
          }
        ]
      },
      { 
        "value": "P3",
        "label": "仓库#3",
        "children": [
          { 
            "value": "C2_1",
            "label": "物料1"
          }
        ]
      },
      { 
        "value": "P4",
        "label": "仓库#4",
        "children": [
          { 
            "value": "C3_1",
            "label": "物料1"
          },
          { 
            "value": "C3_5",
            "label": "物料4"
          }
        ]
      },
      { 
        "value": "P5",
        "label": "仓库#5",
        "children": [
          { 
            "value": "C4_2",
            "label": "物料2"
          },
          { 
            "value": "C4_18",
            "label": "物料7"
          }
        ]
      },
      { 
        "value": "P6",
        "label": "仓库#6",
        "children": [
          { 
            "value": "C5_19",
            "label": "物料8"
          }
        ]
      },
      { 
        "value": "P7",
        "label": "测试盘点",
        "children": [
          { 
            "value": "C6_1",
            "label": "物料1"
          },
          { 
            "value": "C6_19",
            "label": "物料8"
          }
        ]
      }
    ]

这样就好了，没有问了

### 结论 ###

element-ui中的**级联选择器**,data值在设定的时候，不管是那一层的value都要是唯一的，即全局唯一，要不然组件在渲染的时候就会出现问题。

### 谢谢观看 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Jvcnkz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200610120516553.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Jvcnkz,size_16,color_FFFFFF,t_70