基于Element UI的级联选择器实现：子父节点异构名称映射与无子级数据优雅处理方案

<el-cascader 
  v-model="selectedValue"
  :options="treeData"
  :props="cascaderProps"
  @change="handleChange">
</el-cascader>

props: {
  lazy: true,
  lazyLoad: this.loadChildren,
  label: 'componentName',  // 统一显示字段
  value: 'id'             // 值字段
},

loadChildren(node, resolve) {
  const children = node.data?.children?.map(item => ({
    ...item,
    // 动态转换字段：将manufacturerName映射到componentName
    componentName: item.manufacturerName || item.productName || '未命名'
  })) || [];
  
  resolve(children);
}

loadChildren(node, resolve) {
  let children = [];
  
  if (!node.data.children || node.data.children.length === 0) {
    // 无子级数据时返回特殊节点
    children = [{
      componentName: '暂无子数据',
      id: null,
      isPlaceholder: true,
      disabled: true,
      leaf: true
    }];
  } else {
    // 正常数据处理
    children = node.data.children.map(child => ({
      ...child,
      componentName: child.manufacturerName || child.productName,
      leaf: !child.children
    }));
  }
  
  resolve(children);
}

{
  ...child,
  componentName: child.manufacturerName || child.productName || '默认值'
}

if (!node.data.children || 
    !Array.isArray(node.data.children) || 
    node.data.children.length === 0) {
  // 空状态处理
}

const nodeCache = new Map();

loadChildren(node, resolve) {
  if (nodeCache.has(node.uid)) {
    return resolve(nodeCache.get(node.uid));
  }
  
  // ...正常加载逻辑
  
  nodeCache.set(node.uid, children);
  resolve(children);
}

try {
  const res = await api.getChildren(node.data.id);
  processChildren(res.data);
} catch (err) {
  resolve([{
    componentName: '加载失败',
    disabled: true,
    leaf: true
  }]);
}