1. When using TreeSelectcomponents, we need to generate the official sample array structure based on the data returned by the interface
2. Because the basics are relatively simple, I hope to help more beginners, here is mainly to share the code, the code is named and modified according to the specific situation, for reference only
const classGradesData = [];
// eslint-disable-next-line no-unused-expressions
classTypeSet &&
classTypeSet.forEach((item, idex) => {
// 生成children数组结构
const gradesChildren = [];
gradeList.forEach((itm, idx) => {
if (item === itm.classType) {
gradesChildren.push({
grade: itm.gradeName,
value: itm.gradeEnum,
key: idx
});
}
});
// 生成value label数组结构
const newGradesData = {
label: item,
key: idex,
gradesChildren,
};
return classGradesData.push(newGradesData);
});
- use
<Select
mode="multiple"
allowClear
style={
{
width: '100%' }}
placeholder="请选择适用年级"
onChange={
this.handleChange}
defaultValue={
record.gradeEnumList}
>
{
classGradesData.map((item, inx) => {
return (
<OptGroup label={
item.label} key={
`${
inx * 3}`}>
{
item.gradesChildren.map((item2, index2) => {
return (
<Option key={
DataUtils.generateKey(index2)} value={
item2.value}>
{
item2.grade}
</Option>
);
})}
</OptGroup>
);
})}
</Select>
