当前位置：首页 > news >正文

二级菜单的两种思路（完成部分）

news 2025/7/23 14:12:26

第一种

<el-form ref="formRef" :model="form" :rules="rules" label-width="120px"><el-form-item label="类型" prop="type"><el-select v-model="form.type" placeholder="请选择类型" @change="handleTypeChange"><el-optionv-for="dict in types":key="dict.value":label="dict.label":value="dict.value"></el-option></el-select></el-form-item><el-form-item label="子类型" prop="subType" ><el-select v-model="form.subType" placeholder="请选择子类型"><el-optionv-for="dict in filteredSubTypes":key="dict.value":label="dict.label":value="dict.value"></el-option></el-select></el-form-item>

@change=“handleTypeChange”
types
filteredSubTypes

const types = ref([{ label: '开展宣传情况', value: '1' },{ label: '开展活动情况', value: '2' },{ label: '政务接待保障情况', value: '3' },{ label: '提供场地情况', value: '4' },{ label: '综合窗口服务情况', value: '5' },{ label: '公共法律服务情况', value: '6' },
]);
const subTypes = ref([{ label: '微信推文', value: '1_01' },{ label: '视频', value: '1_02' },{ label: '开展活动', value: '2_01' },{ label: '政务接待', value: '3_01' },{ label: '提供会务保障', value: '3_02' },{ label: '免费场地', value: '4_01' },{ label: '住院补助', value: '5_01' },{ label: '参续保', value: '5_02' },{ label: '电话及现场接访', value: '6_01' },
]);const filteredSubTypes = ref();// 当选择一级时，归纳出对应的二级菜单
function handleTypeChange(val: string) {if (!val) {return [];}form.value.subType = undefined;filteredSubTypes.value = subTypes.value.filter(subType => subType.value.split('_')[0] === val);
}// 回显专用
function initSubTypes(val: string) {filteredSubTypes.value = subTypes.value.filter(subType => subType.value.split('_')[0] === val);
}```javascript
// 回显专用
if (isUpdate.value) {form.value = param.data;initSubTypes(form.value.type as string);
}

第二种（级联）

仅展示数据清洗

要将您提供的 `types` 和 `subTypes` 结构转换为指定的结构，我们需要执行以下步骤：
1. 初始化一个新数组，用于存放最终的结构。
2. 遍历 `types` 数组，为每个元素创建一个新的对象，该对象包含 `id`、`label`、`value` 和一个空的 `children` 数组。
3. 遍历 `subTypes` 数组，根据 `subType` 的 `value` 前缀将其添加到对应 `type` 的 `children` 数组中。
以下是转换过程的代码示例：
```javascript
const types = ref([{ label: '开展宣传情况', value: '1' },{ label: '开展活动情况', value: '2' },{ label: '政务接待保障情况', value: '3' },{ label: '提供场地情况', value: '4' },{ label: '综合窗口服务情况', value: '5' },{ label: '公共法律服务情况', value: '6' },
]);
const subTypes = ref([{ label: '微信推文', value: '1_01' },{ label: '视频', value: '1_02' },{ label: '开展活动', value: '2_01' },{ label: '政务接待', value: '3_01' },{ label: '提供会务保障', value: '3_02' },{ label: '免费场地', value: '4_01' },{ label: '住院补助', value: '5_01' },{ label: '参续保', value: '5_02' },{ label: '电话及现场接访', value: '6_01' },
]);
// 转换为指定结构的函数
function transformToNewStructure(types, subTypes) {return types.map((type, index) => {return {id: index + 1,label: type.label,value: type.value,children: subTypes.filter(subType => subType.value.startsWith(type.value)).map(subType => ({id: subType.value.split('_')[1],label: subType.label,value: subType.value}))};});
}
// 使用转换函数并打印结果
const newStructure = transformToNewStructure(types.value, subTypes.value);
console.log(newStructure);

执行上述代码后，将得到以下结构：

[{"id": 1,"label": "开展宣传情况","value": "1","children": [{ "id": "01", "label": "微信推文", "value": "1_01" },{ "id": "02", "label": "视频", "value": "1_02" }]},{"id": 2,"label": "开展活动情况","value": "2","children": [{ "id": "01", "label": "开展活动", "value": "2_01" }]},{"id": 3,"label": "政务接待保障情况","value": "3","children": [{ "id": "01", "label": "政务接待", "value": "3_01" },{ "id": "02", "label": "提供会务保障", "value": "3_02" }]},{"id": 4,"label": "提供场地情况","value": "4","children": [{ "id": "01", "label": "免费场地", "value": "4_01" }]},{"id": 5,"label": "综合窗口服务情况","value": "5","children": [{ "id": "01", "label": "住院补助", "value": "5_01" },{ "id": "02", "label": "参续保", "value": "5_02" }]},{"id": 6,"label": "公共法律服务情况","value": "6","children": [{ "id": "01", "label": "电话及现场接访", "value": "6_01" }]}
]