二级菜单的两种思路(完成部分)

第一种

html 复制代码
<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-option
         v-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-option
         v-for="dict in filteredSubTypes"
         :key="dict.value"
         :label="dict.label"
         :value="dict.value"
     ></el-option>
   </el-select>
 </el-form-item>

@change="handleTypeChange"

types

filteredSubTypes

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' },
]);

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);
}

第二种 (级联)

仅展示数据清洗

javascript 复制代码
要将您提供的 `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);

执行上述代码后,将得到以下结构:

json 复制代码
[
  {
    "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" }
    ]
  }
]

请注意,id 字段在子类型中是从 value 字段中提取的,并且假设它是数字。如果 id 需要是整数,则可能需要进行额外的转换。

相关推荐
Yaml4几秒前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 分钟前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶3 分钟前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo4 分钟前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v7 分钟前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫8 分钟前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.13 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
LuckyLay21 分钟前
Spring学习笔记_27——@EnableLoadTimeWeaving
java·spring boot·spring
向阳121834 分钟前
Dubbo负载均衡
java·运维·负载均衡·dubbo
Gu Gu Study44 分钟前
【用Java学习数据结构系列】泛型上界与通配符上界
java·开发语言