正在用ant design pro 重构一个项目。 有一部分的需求是这样的
需求描述: 一共三级类目, 初始加载一级类目项, 点击一级类目后请求后台返回渲染出二级类目, 点击二级类目请求后台返回三级类目, 需要在三级类目选中至少一个的时候更改一级和二级类目为选中状态(绿色对号), 三级类目一个都没选的时候二级类目是未选中状态(灰色框), 一个二级类目也没选中的时候一级类目是未选中状态,否则是选中状态
PS: 只有三级类目的选中和未选中状态是在点击时就立即切换, 而一二级的选中状态只有在点击三级类目时候判断进行更改
当点击确认添加按钮时 判断二级类目是否不超过5个, 超过弹提醒框, 不超过把选中的各个项渲染到一个<Table/>里
如下图:
现在后台的返回数据结构为
一级: [{name: '日化清洁', level: 1, id:'rihuaqingjie'},...]
二级: [{name: '口腔清洁', level: 2, id:'kouqiangqingjie'},...]
三级: [{name: '牙齿护理', level: 3, id:'yachihuli'},...]
我看到这个数据结构和需求以后 想到的是把请求的数据结构改成tree的形式 然后用<Tree> 组件渲染, 是否还有其他更好的办法去实现这一部分功能 , 希望各位朋友能指点指点
http://uxco.re/components/cas...