一、antd默认级联选择如下

antd默认级联选择

1.1、需求是有几个分类的设置，需要保存在后台，提供添加和删除个人设置

最终需求1
最终需求2

二、实现上图功能

2.1、通过props传入所需值

<CustomerCascader
                className="customerCascader"
                options={this.state.options}
                userDetail={this.userDetail}
                defaultValues={this.state.defaultValues}
                defaultEntryId={this.state.defaultEntryId}
                preferenceKeyType={PreferenceKeys.DMTLayoutPreference}
                selectedPreference={(selected, selectedPreference) => this.selectedPreference(selected, selectedPreference)}
                defaultGridConfigure={this.state.defaultGridConfigure}
                changeLayoutOrFilter={selectedConfigure => this.changeLayoutOrFilter(selectedConfigure)}
                switchLoadingIndicator={(show, hint) => this.switchLoadingIndicator(show, hint)}
                deletedPreference={deletedId => this.deletedPreference(deletedId)}
              />

注：options：为数据源 defaultValues：默认显示的选中项

import React from 'react';
import PropTypes from 'prop-types';
import { Cascader, Icon, Button } from 'antd';
import './CustomerCascader.css';
import UserServiceProxy from '../../Common/ServiceProxy/userServiceProxy';
import handleError from '../../Common/errorHandlingUtil';

export default class CustomerCascader extends React.Component {
  constructor(props) {
    super(props);
    this.userServiceProxy = new UserServiceProxy();
    this.state = {
      selectedValue: [],
    };
  }

  onChange(value, selectedOptions) {
    const { selectedValue } = this.state;
    const { userDetail, preferenceKeyType } = this.props;
    let preferenceConfigure = {};
    if (selectedValue[0] === value[0] && selectedValue[1] === value[1]) {
      return;
    }
    let entrId = null;
    this.props.switchLoadingIndicator(true);
    if (value[1] === 'Contract Team') {
      preferenceConfigure.filterAndSort = null;
      preferenceConfigure.layout = null;
      this.props.selectedPreference(value, preferenceConfigure);
      this.saveSelectedToDefault(userDetail.userId, entrId, preferenceKeyType);
    } else {
      entrId = selectedOptions[1].entryId;
      this.userServiceProxy.getUserPreferenceDetail(userDetail.userId, entrId)
        .then((resp) => {
          preferenceConfigure = JSON.parse(resp.result.value);
          this.props.selectedPreference(value, preferenceConfigure);
          this.saveSelectedToDefault(userDetail.userId, entrId, preferenceKeyType);
        }).catch((error) => {
          handleError(error);
        });
    }
  }

  saveSelectedToDefault(userId, entrId, preferenceKeyType) {
    this.userServiceProxy.setToUserdefaultEntry(userId, entrId, preferenceKeyType)
      .then(() => {
        this.props.switchLoadingIndicator(false);
      }).catch((error) => {
        handleError(error);
        this.props.switchLoadingIndicator(false);
      });
  }

  deleteLayout(deleteId) {
    const { userDetail, preferenceKeyType } = this.props;
    const entryIds = [];
    entryIds.push(deleteId);
    this.props.switchLoadingIndicator(true);
    this.userServiceProxy.deleteUserdefaultEntry(userDetail.userId, entryIds, preferenceKeyType).then(() => {
      this.props.deletedPreference(deleteId);
      this.props.switchLoadingIndicator(false);
    }).catch((error) => {
      handleError(error);
      this.props.switchLoadingIndicator(false);
    });
  }

  customerOption(options) {
    const { defaultEntryId } = this.props;
    if (options && options.length) {
      options.forEach((item) => {
        if (item.children && item.children.length) {
          item.fieldNames = item.value;
          item.children.forEach((child) => {
            this.deleteValue = child.entryId;
            let tempObj = {};
            tempObj = {
              label: (
                <span>
                  <span title={child.value} className="layoutTitle">{child.value}</span>
                  { child.code ? null :
                  <Button
                    className="deleteLayoutBtn"
                    type="danger"
                    onClick={(e) => { this.deleteLayout(child.entryId); e.stopPropagation(); }}
                  ><Icon type="close" />
                  </Button> }
                </span>
              ),
              value: child.value,
              fieldNames: child.value,
            };
            Object.assign(child, tempObj);
            if (defaultEntryId === child.entryId) {
              this.defaultLabel = child.label;
            }
          });
        }
      });
    }
    return options;
  }

  displayRender(labels, selectedOptions) {
    const { selectedValue } = this.state;
    let displayTitle = '';
    selectedValue.forEach((item, i) => {
      if (i === 0) {
        displayTitle = `${item}`;
      } else {
        displayTitle = `${displayTitle}/${item}`;
      }
    });
    return <span key="displayRender">{displayTitle}</span>;
  }

  render() {
    const {
      options, defaultValues,
    } = this.props;
    const customerOption = this.customerOption(options);
    this.state.selectedValue = defaultValues;
    return (
      <Cascader
        options={customerOption}
        loadData={param => this.loadData(param)}
        onChange={(param, selectedOption) => this.onChange(param, selectedOption)}
        allowClear={false}
        changeOnSelect={false}
        defaultValue={defaultValues}
        displayRender={(labels, selectedOptions) =>
          this.displayRender(labels, selectedOptions)}
        selectedOptions
        value={defaultValues}
      />
    );
  }
}
CustomerCascader.propTypes = {
  options: PropTypes.any,
  defaultValues: PropTypes.any,
  userDetail: PropTypes.any,
  switchLoadingIndicator: PropTypes.func,
  selectedPreference: PropTypes.func,
};

注：displayRender={(labels, selectedOptions) => this.displayRender(labels, selectedOptions)}是用来控制选择后的title显示，因为我们将label改成了一个对象，所以defaultValue={defaultValues}不会生效，value={defaultValues}也同样不生效