ant 多级多选

最新推荐文章于 2024-07-19 12:07:10 发布

原创最新推荐文章于 2024-07-19 12:07:10 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

1 篇文章

订阅专栏

本文探讨Ant Design框架中如何实现多级选择功能，涵盖了组件使用、配置选项及实际应用案例，帮助开发者更好地理解和运用这一强大的前端UI库。

import React, { PureComponent } from 'react';
import _ from 'lodash';
import { Cascader, Tag } from 'antd';

class CascaderMul extends PureComponent {
  state = {
    value: [],
  };

  allLabel = [];

  componentDidMount() {
    const { options } = this.props;
    const deepLoop = (selectedOptions) => {
      selectedOptions.forEach((item) => {
        if (item.children) {
          deepLoop(item.children, this.allLabel);
        } else {
          this.allLabel.push(item);
        }
      });
    };
    deepLoop(options);
  }

  onChange = (v) => {
    const { value } = this.state;
    const lastValue = v[v.length - 1];
    if (!value.includes(lastValue)) {
      this.setState({
        value: [...value, lastValue],
      });
    }
  };

  displayRender = () => {
    const { value } = this.state;
    const items = _.unionBy(this.allLabel, 'value').filter((item) => value.includes(item.value));
    return items.map((item) => {
      if (value.includes(item.value)) {
        return (
          <Tag closable key={item.label}>
            {item.label}
          </Tag>
        );
      }
      return null;
    });
  };

  render() {
    const { style, options } = this.props;
    const { value } = this.state;
    return (
      <>
        <Cascader
          options={options}
          expandTrigger="hover"
          onChange={this.onChange}
          placeholder="请选择"
          style={style}
          fieldNames={{ label: 'label', value: 'value', children: 'children' }}
          allowClear={false}
          value={value || []}
          displayRender={this.displayRender}
        />
      </>
    );
  }
}

export default CascaderMul;

import CascaderMul from './components/CascaderMul';

const options = [
      {
        value: '1',
        label: 'Zhejiang',
        children: [
          {
            value: '2',
            label: 'Hangzhou',
            children: [
              {
                value: '3',
                label: 'West Lareeke',
              },
              {
                value: '6',
                label: 'West dfgdLake',
              },
            ],
          },
          {
            value: '9',
            label: 'Hangzhou',
            children: [
              {
                value: '36',
                label: 'West Lafke',
              },
            ],
          },
        ],
      },
      {
        value: '4',
        label: 'Jiangsu',
        children: [
          {
            value: '5',
            label: 'Nanjing',
            children: [
              {
                value: '6',
                label: 'Zhong Hua Men',
              },
            ],
          },
        ],
      },
    ];
<CascaderMul
                options={options}
                value={[]}
                onChange={() => {}}
              />