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

最新推荐文章于 2025-02-05 17:48:57 发布

qq_38793958邓鑫涛

最新推荐文章于 2025-02-05 17:48:57 发布

阅读量1.8w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： antD 文章标签：级联动态加载 antd Cascader

本文链接：https://blog.youkuaiyun.com/qq_38793958/article/details/84257776

antD 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Ant Design的Cascader组件如何实现动态加载。通过官方文档和具体代码示例，展示了根据产品类型获取产品的动态加载过程。讨论了isLeaf属性的使用，以及如何利用selectedOptions.length来控制多级下拉框的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，官方文档：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判断进行控制，它意味当前级联框的级数。