Ant Design Cascader 交互场景

何时使用

• 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
• 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
• 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

业务场景

提交选择器子选项，多选场景下用约定分割符分割，以字符串形式提交到后端，编辑时回显数据。

如何展示子项

showCheckedStrategy={Cascader.SHOW_CHILD}

<Cascader
   multiple
   options={option}
   placeholder="请选择省市"
   showCheckedStrategy={Cascader.SHOW_CHILD}
/>

前后端交互

  const onFinish = (values) => {
    // 需要提交的数据格式(约定为字符串,多个用','分割)
    const area = _.isNil(values?.area)
      ? values?.area
      : values?.area.map(([parent, child]) => child).join(",");
    console.log(typeof area, area, "提交到后端数据");
  };

编辑时回显

提交数据时去掉了父级选项，回显时需要找回每个子元素的父级。

//  假设获取到后端数据
  const data = { area: "chengdu,mianyang" };
  
  const getData = (value: string): string[] =>
    option
      .map((parent) =>
        parent.children.map((child) => [parent.value, child.value])
      )
      .flat()
      .find((it) => _.last(it) === value);

  const displayData = data?.area
    .split(",")
    .map((item: string) => getData(item));

  form.setFieldsValue({
    area: displayData
  });
  console.log(displayData, "处理好的回显数据赋值给Form.Item回显");

完整代码

import React from "react";
import _ from "lodash";
import { Cascader, Form, Button } from "antd";
import "antd/dist/antd.css";
import "./index.css";

const CascaderComponent: React.FC = () => {
  const [form] = Form.useForm();

  const option = [
    {
      label: "四川",
      value: "siChuan",
      children: [
        {
          label: "成都",
          value: "chengdu"
        },
        {
          label: "绵阳",
          value: "mianyang"
        },
        {
          label: "德阳",
          value: "deyang"
        },
        {
          label: "眉山",
          value: "meishan"
        }
      ]
    },
    {
      label: "浙江省",
      value: "zhejiang",
      children: [
        {
          label: "杭州",
          value: "hangzhou"
        }
      ]
    }
  ];

  //  如何回显数据
  const data = { area: "chengdu,mianyang" };

  form.setFieldsValue({
    area: data.area
  });

  const getData = (value: string): string[] =>
    option
      .map((parent) =>
        parent.children.map((child) => [parent.value, child.value])
      )
      .flat()
      .find((it) => _.last(it) === value);

  const displayData = data?.area
    .split(",")
    .map((item: string) => getData(item));

  form.setFieldsValue({
    area: displayData
  });
  console.log(displayData, "处理好的回显数据赋值给Form.Item回显");

  const onFinish = (values) => {
    // 需要提交的数据格式(约定为字符串,多个用','分割)
    const area = _.isNil(values?.area)
      ? values?.area
      : values?.area.map(([parent, child]) => child).join(",");
    console.log(typeof area, area, "提交到后端数据");
  };

  return (
    <Form form={form} onFinish={onFinish} layout="vertical">
      <Form.Item
        label="省市"
        name="area"
        initialValue={[["siChuan", "chengdu"]]}
      >
        <Cascader
          multiple
          options={option}
          placeholder="请选择省市"
          showCheckedStrategy={Cascader.SHOW_CHILD}
        />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default CascaderComponent;