antd级联框Cascader动态加载的用法

朱雀 2022-04-15 00:56 1574阅读 0赞

一，官方文档：[https://ant.design/components/cascader-cn/\#header][https_ant.design_components_cascader-cn_header]

二，具体代码（以根据产品类型获取产品为例）：

import React, { Component } from 'react';
    import { Cascader,Form,} from 'antd';
    
    
    //级联获取产品类型
    const getProductType= () => axios.post(config.HOST + '/work/getProductType', qs.stringify({
        userToken: JSON.parse(localStorage.getItem('user')).token,
    })).then(function (response) {
        return response.data;
    }).catch(function (error) {
        console.log(error);
    });
    //级联根据产品类型获取产品
    const getProductOfType= (productTypeName) => axios.post(config.HOST + '/work/getProductOfType', qs.stringify({
        userToken: JSON.parse(localStorage.getItem('user')).token,
        productTypeName:productTypeName,
    })).then(function (response) {
        return response.data;
    }).catch(function (error) {
        console.log(error);
    });
    
    //创建form组件
    const CollectionCreateForm = Form.create()(
        (props) => {
            const {productTypeOptions,getProductsLoadData,productDisplayRender} = props;
        
        return(
            <div>
                <form>
                    <FormItem  >
                              {getFieldDecorator('minProduct', )
                                    (
                                        <Cascader options={productTypeOptions}
                                                  loadData={getProductsLoadData}
                                                  displayRender={productDisplayRender}
                                                  expandTrigger="hover"
                                         />
                                     )}
                    </FormItem>
                </form>
            </div>
        )
    )
    
    //创建组件
    class formDemo extends Component {
        state={
                productTypeOptions:[],//产品类型option
              }
    }
    
    //组件生命周期
    componentDidMount() {
            this.getProducttypes(); //在渲染前调用
        }
    
    //级联获取产品类型
    getProducttypes=()=>{
        getProductType().then(res=>{
            const productTypeList = res.productTypeList;
                const productTypeOption = productTypeList&&productTypeList.map(productType=>productType.id? {
                         value:productType.id,
                         label:productType.name,
                         isLeaf:false,
                      }:"");
                this.setState({
                    productTypeOptions:productTypeOption
                });
            });
        };
    
    //级联根据产品类型获取产品
    getProductsLoadData=(selectedOptions)=>{
         const targetOption = selectedOptions[selectedOptions.length - 1];
              getProductOfType(targetOption.label).then(res => {
               const productList = res.productList;
               targetOption.children = productList && productList.map(product => product.id ?
                        {
                            value: product.id,
                            label: product.name,
                            isLeaf: true,
                        } : "");
                    this.setState({
                        productTypeOptions: [...this.state.productTypeOptions],
                    });
                });
        }
    
    //级联选择后的界面渲染
    productDisplayRender = (label) => {
            return label[label.length - 1];
    };
    
    //渲染
     render() {
        <span>
            <CollectionCreateForm
               productTypeOptions={this.state.productTypeOptions}//产品级联一级下拉框
               getProductsLoadData={this.getProductsLoadData}//产品级联二级下拉框
               productDisplayRender={this.productDisplayRender}//产品级联选择框学则后的渲染函数
            />
        </span>
    }

三，要点说明：

（1），isLeaf为true时，表示当层下拉框是最后一级下拉框，默认为true；

（2），若有n级下拉框，可根据selectedOptions.length来做if判断进行控制，它意味当前级联框的级数。

[https_ant.design_components_cascader-cn_header]: https://ant.design/components/cascader-cn/#header