当前位置: 首页 > article >正文

react的antd中Cascader级联选择如何回显

如果你的数据都是这个样子的

{
    "id": 1015,
    "pid": 0,
    "name": "电力、热力、燃气及水生产和供应业",
    "children": [
        {
            "id": 1403,
            "pid": 1015,
            "name": "热力",
        },
        {
            "id": 1404,
            "pid": 1015,
            "name": "燃气以及生产供应业",
        },
        {
            "id": 1513,
            "pid": 1015,
            "name": "电力",
        }
    ],
}

这个时候你需要把他们修改一下为其添加value属性和lable属性,value对应id,lable对应name,因为组件只识别value和lable

   const data = res.data.data;
   // 对数组中的每个元素进行处理
   data.forEach((item: any) => addValueLabel(item));

   setIndustry(data);
// 遍历数据并添加 value 和 label
   function addValueLabel(item: { value: any; id: any; label: any; name: any; children: any[]; }) {
     // 给当前项加上 value 和 label
     item.value = item.id;
     item.label = item.name;

     // 如果有子项,递归添加
    if (item.children && Array.isArray(item.children)) {
    item.children.forEach((child: any) => addValueLabel(child));
    }
 }

然后使用form方法进行回显,写上对应的id就可以了


http://www.kler.cn/a/535695.html

相关文章:

  • mysql8安装时提示-缺少Microsoft Visual C++ 2019 x64 redistributable
  • DeepSeek大模型介绍、本地化部署与使用!【AI大模型】
  • hot100(7)
  • C#结合html2canvas生成切割图片并导出到PDF
  • oracle 基础语法复习记录
  • uniapp小程序自定义中间凸起样式底部tabbar
  • 网络安全 风险评估指南 网络安全风险测评
  • Nginx 请求超时
  • CEF132 编译指南 Windows 篇 - 安装 Visual Studio 2022 (二)
  • Linux学习笔记15---定时器按键消抖实验
  • ASP.NET Core JWT
  • DeepSeek 引发 AI 大模型战火,编程语言群雄激战谁夺胜利权杖?
  • 4G核心网的演变与创新:从传统到虚拟化的跨越
  • e2studio开发RA2E1(8)----GPT定时器频率与占空比的设置
  • 3. 【.NET Aspire 从入门到实战】--理论入门与环境搭建--环境搭建
  • SpringBoot开发(五)SpringBoot接收请求参数
  • 【数据结构】单向链表(真正的零基础)
  • 六。自定义数据集 使用pytorch框架实现逻辑回归并保存模型,然后保存模型后再加载模型进行预测
  • 虚拟机报错:处理器未启用 NX/XD,而 VMware Workstation 要求启用 NX/XD.没有可打开电源的虚拟机
  • k8sollama部署deepseek-R1模型,内网无坑
  • 【Leetcode 热题 100】72. 编辑距离
  • 【2025最新计算机毕业设计】基于springboot智能教师评价系统【提供源码+答辩PPT+文档+项目部署】(高质量源码,可定制,提供文档,免费部署到本地)
  • 深入理解C++的new和delete
  • linux 使用docker安装 postgres 教程,踩坑实践
  • Unity3D 切线空间及其应用详解
  • springboot011-G县乡村生活垃圾治理问题中运输地图系统