react-antd级联选择框(后台数据渲染)
发布日期:2021-05-20 10:06:36 浏览次数:20 分类:技术文章

本文共 887 字,大约阅读时间需要 2 分钟。

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)

转载地址:https://blog.csdn.net/weixin_45416217/article/details/106397302 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:react上级页面向下级页面传值方式
下一篇:react-dva-antd实现页面loading加载效果(首屏优化)

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年04月23日 03时48分36秒