react-antd級聯選擇框（後臺數據渲染）

1、默認效果

2、這裏我們需要實現的是二級級聯選擇。
官方實例給的數組結構是這樣的

所以我們也要將後臺返回的數據構造成這樣既可。

    const classGradesData = [];
    singleClassList &&
      singleClassList.forEach(item => {
        const children = [];
        //這裏是生成children的數據結構
        item.classList.forEach(classListItem => {
          children.push({
            value: classListItem.classId,
            label: classListItem.className,
          });
        });
        const newClassData = {
          value: item.gradeName,
          label: item.gradeName,
          children,
        };
        return classGradesData.push(newClassData);
      });

具體情況視自己後臺數據返回的數據結構而定

3、這裏可能大家還會遇到一個問題，就是給定默認值。
需要注意的是，我們給的默認值也一定要符合示例的數組解構。

{['zhejiang', 'hangzhou', 'xihu']}

 參考

  // todo 班級默認值處理
    const defaultId = classId;
    const defaultName = [];
    const Name = query.gradeName === '' ? abnormalClass : query.gradeName;
    defaultName.push(Name, defaultId)