react +Antd Cascader级联选择使用接口数据渲染

最新推荐文章于 2024-05-20 18:29:30 发布

&ACE&

最新推荐文章于 2024-05-20 18:29:30 发布

阅读量807

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_59525879/article/details/132462618

版权

1获取接口数据并将数据转换成树形数组

 useEffect(() => {
    axios
      .get('/接口数据', {
        params: {
          “请求参数”
        },
      })
      .then((res) => {
        console.log(res);

        const getTreeData = (treeData, pid) => {
          // 把数据转化为树型结构
          let tree = [];
          let currentParentId = pid || 0;
          for (let i = 0; i < treeData.length; i += 1) {
            if (treeData[i]) {
              if (treeData[i].pid === currentParentId) {
                tree.push(treeData[i]);
              }
            }
          }
          for (let j = 0; j < tree.length; j += 1) {
            if (tree[j]) {
              let children = getTreeData(treeData, tree[j].id);
              if (children && children.length) {
                tree[j].children = children;
              }
            }
          }
          return tree;
        };

        // 树形数据
        let data = getTreeData(获取需要转换的参数);
        console.log(data);

        setGear(data);
      });
  }, []);

2使用自定义Cascader级联选择组件

import {Cascader } from 'antd';
 
 <Cascader
  value={rank || undefined}
   fieldNames={{
                 label: 'title',
                  value: 'id',
                  children: 'children',
                   }}
      options={gear}
      onChange={onChange}
      placeholder="请输入档级"
      style={{ width: 170 }}
                        />

3效果：