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里面的数据格式如下:
标签:父级,title,value,item,values,子级,antd,onChange 来源: https://blog.csdn.net/qq_40830369/article/details/123040390