1. Al usar TreeSelectcomponentes, necesitamos generar la estructura de matriz de muestra oficial basada en los datos devueltos por la interfaz
2. Debido a que los conceptos básicos son relativamente simples, espero ayudar a más principiantes, aquí es principalmente para compartir el código, el código se nombra y modifica de acuerdo con la situación específica, solo como referencia
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);
});
- usar
<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>
