antd TreeSelect （ 父级原因禁用，子级原因可选 ）

antd TreeSelect （ 父级原因禁用，子级原因可选 ）

实现效果:

​ 如图红色框圈中为父级原因，这是不可选中的。父级原因下的子级都是可以选中的。此外子级原因是可以多选的。

使用的组件：

​ 参考组件地址：https://ant.design/components/tree-select-cn/#components-tree-select-demo-multiple

核心代码:

组件：

​ 这个组件实现的功能总体不是很复杂。主要是和这两个组件配合使用。为树型选择控件，它的功能是把可选择的数据做一个分层结构。可以把理解为每一个独立的节点，做单独的配置。

import React from 'react';
import { TreeSelect } from 'antd';

const { TreeNode } = TreeSelect;

export default ({ treeData = [], onChange, value = [], placeholder = '请选择消息提醒人' }) => {
    const onNodeChange = values => {
        console.log('values', values);
        onChange(values);
    };

    const renderTreeNodes = data =>
        data.map(item => {
            console.log('item', item);
            if (item.children) {
                item.disabled = true;
                return (
                    <TreeNode key={item.key} title={item.title} value={item.value} disabled={item.disabled}>
                        {renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode {...item} key={item.key} title={item.title} value={item.value} />;
        });

    return (
        <TreeSelect
            showSearch
            style={{ width: '100%' }}
            value={value}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            placeholder={placeholder}
            treeNodeFilterProp="label"
            allowClear
            multiple
            treeDefaultExpandAll={false}
            listHeight={350}
            onChange={values => onNodeChange(values)}
        >
            {renderTreeNodes(treeData)}
        </TreeSelect>
    );
};

调用：

  // 引用不能选择父级的treeSelect
import TreeNodeSelect from './treeNodeSelect';  
    
    <TreeNodeSelect
      treeData={data}
      placeholder={choosePlaceholder()}
      // defaultValue={props.defaultValue}
      value={props.defaultValue}
      onChange={onChange}
    />

​ treeData里面的数据格式如下：