ProFormCascader组件-省市区联动组件数据处理

最新推荐文章于 2024-04-08 23:33:39 发布

踩過2000坑

最新推荐文章于 2024-04-08 23:33:39 发布

阅读量674

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/tanwentanli/article/details/131157057

版权

const [cityList, setCityList] = useState<any>([]);

useEffect(() => {
    //获取城市列表
    getCityeList().then((res) => {
      const list = res?.map((item) => {
        const obj = {
          label: item.name,
          value: item.divisionId,
          children: item.childAddress.map((ztem) => {
            return {
              label: ztem.name,
              value: ztem.divisionId,
              children: ztem?.childAddress.map((utem) => {
                return {
                  label: utem.name,
                  value: utem.divisionId,
                };
              }),
            };
          }),
        };
        return obj;
      });
      setCityList(list);
    });
  }, []);

//使用
<ProFormCascader
    width="md"
    required
    name="cityName"
    label="城市"
    rules={[
      {
       required: true,
       message: "请选择城市",
       },
      ]}
    fieldProps={{
    options: cityList,
    fieldNames: {
       children: cityList?.children,
       label: cityList?.lable,
       },
       onChange: handleHouseCityChange,
       }}
 />

项目中用的是antDesign Pro，今天来记一下ProFormCascader组件的数据处理；

首先来看一下从后端请求过来的数据原始格式：如下图

（1）

（2）

（3）全部展开的数据层级如下：

前端数据处理如下：

  const [cityList, setCityList] = useState<any>([]);

useEffect(() => {
    //获取城市列表
    getCityeList().then((res) => {
      const list = res?.map((item) => {
        const obj = {
          label: item.name,
          value: item.divisionId,
          children: item.childAddress.map((ztem) => {
            return {
              label: ztem.name,
              value: ztem.divisionId,
              children: ztem?.childAddress.map((utem) => {
                return {
                  label: utem.name,
                  value: utem.divisionId,
                };
              }),
            };
          }),
        };
        return obj;
      });
      setCityList(list);
    });
  }, []);

<ProFormCascader
            width="md"
            required
            name="cityName"
            label="城市"
            rules={[
              {
                required: true,
                message: "请选择城市",
              },
            ]}
            fieldProps={{
              options: cityList,
              fieldNames: {
                children: cityList?.children,
                label: cityList?.lable,
              },
              onChange: handleHouseCityChange,
            }}
          />

现在我们来打印看一下，选择完省市区以后，该组件字段取到的数据是什么样子的：

  // 选择城市 onChange
  const handleHouseCityChange = (e: any) => {
    console.log("cityName-----", e);

    const formValue = form.getFieldsValue();
    form.setFieldsValue({
      ...formValue,
      projectMid: null,
      outerLayoutsId: null,
    });
    if (id != 10) {
      handelQueryQuarter();
    }
    if (e[0] == 500000) {
      setIsChongQing(true);
    } else {
      setIsChongQing(false);
    }
  };

打印结果如下：

0:代表省

1:代表市

2:代表区