[pit avoidance refers to "difficult"] antd cascader implements new customized functions

The renderings are as follows ： You can customize how to add data in a certain layer

Code implementation

Yes Cascader Medium options Do the processing

		 <Cascader
            allowClear
            expandTrigger="hover"
            options={
    customerOption}
          />

const customerOption = handlecustomerOption(showoptions);

const handlecustomerOption=(opt: any) =>{
    
  if (opt && opt.length) {
    
    opt.forEach((item: any) => {
    
      if (item.children && item.children.length) {
    
        item.fieldNames = item.value;
        item.children.forEach((child: any) => {
    
          let tempObj = {
    };
          tempObj = {
    
            label: (
              <span>
                <span title={
    child.value} className="layoutTitle">{
    child.label}</span>
                {
     child.label ?'':
              <Button
	              type="link"
	              icon={
    <PlusOutlined />}
	              style={
    {
     marginTop: -5 }}>
               newly added 
            </Button>}
              </span>
            ),
            value: child.value,
            fieldNames: child.value,
          };
          Object.assign(child, tempObj);
        });
      }
    });
  }

option initialization JSON The format is as follows ：

  const showoptions = [
    {
    
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
    
          value: '',
          label: '',
        },
        {
    
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
    
              value: 'xihu',
              label: 'West Lake',
            },
          ],
        },
      ],
    },
    {
    
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
    
          value: 'nanjing',
          label: 'Nanjing',
        },
      ],
    },
  ];

{value: '',label: '',} It is equivalent to occupying the top first position in the drop-down data , adopt handlecustomerOption() take label replaced button, So as to realize the new functions .