new Map()+Array.from()整理elementPlus的级联器数据

1、假设有数据：

javascript 复制代码

// 规则类型
const eventTypeStatus = [
    { label: '数据规则', parentId: null, value: 'data' },
    { label: '事件规则', parentId: null, value: 'event' },
]

// 规则来源
const eventSourceStatus = [
    { label: '数据-1', parentId: 'data', value: 'data-001' },
    { label: '数据-2', parentId: 'data', value: 'data-002' },
    { label: '数据-3', parentId: 'data', value: 'data-003' },
    { label: '事件-1', parentId: 'event', value: 'event-001' },
    { label: '事件-2', parentId: 'event', value: 'event-002' },
    { label: '事件-3', parentId: 'event', value: 'event-003' },
]

2、Cascader 级联选择器的数据格式:

3、把1中的 eventTypeStatus 和 eventSourceStatus 数据整理成级联器需要的options数据格式

1、定义方法 buildCascaderOptions

javascript 复制代码

// 将 eventTypeStatus 和 eventSourceStatus 整理为 cascader 所需的 options 结构
const buildCascaderOptions = (eventTypeStatus , eventSourceStatus) => {
  // 步骤1：将 eventTypeStatus 转换为 map，便于快速查找
  const parentMap = new Map();
  console.log('parentMap', parentMap);
  eventTypeStatus.forEach(item => {
    console.log('eventTypeStatus-item:', item);
    
    parentMap.set(item.value, {
      value: item.value,
      label: item.label,
      children: []
    });
    console.log('parentMap', parentMap);
    
  });

  // 步骤2：遍历 eventSourceStatus，将每个 child 添加到对应的 parent 的 children 中
  eventSourceStatus.forEach(child => {
    const parent = parentMap.get(child.parentCd);
    if (parent) {
      parent.children.push({
        value: child.value,
        label: child.label,
        parentCd: child.parentCd // 可选保留
      });
    } else {
      console.warn(`未找到父节点 ${child.parentCd}，无法挂载子项：${child.label}`);
    }
  });

  // 步骤3：将 map 中的所有值转换为数组
  console.log('数组', Array.from(parentMap.values()));
  
  return Array.from(parentMap.values());
};

2、调用 buildCascaderOptions 生成 options

javascript 复制代码

onMounted(() => {
    // 规则类型
    const eventTypeStatus = [
        { label: '数据规则', parentId: null, value: 'data' },
        { label: '事件规则', parentId: null, value: 'event' },
    ]

    // 规则来源
    const eventSourceStatus = [
        { label: '数据-1', parentId: 'data', value: 'data-001' },
        { label: '数据-2', parentId: 'data', value: 'data-002' },
        { label: '数据-3', parentId: 'data', value: 'data-003' },
        { label: '事件-1', parentId: 'event', value: 'event-001' },
        { label: '事件-2', parentId: 'event', value: 'event-002' },
        { label: '事件-3', parentId: 'event', value: 'event-003' },
    ]

    options.value = buildCascaderOptions(eventTypeStatus , eventSourceStatus);
})

3、调用 options

html 复制代码

<el-col :span="7">
   <el-form-item label="事件来源" style="font-weight: 600;width: 100%">
      <el-cascader v-model="eventSourceCascader" :options="options" @change="handleChange"              />
   </el-form-item>
</el-col>