[ { bigName: 'shouji', smallName: '华为' }, { bigName: 'shouji', smallName: '苹果' }, { bigName: '电脑', smallName: '华硕' }, { bigName: '电脑', smallName: '天选' }, ]实现el-cascader的数据结构

[
{
value: 'shouji',
label: '手机',
children: [
{
value: '华为',
label: '华为'
},
{
value: '苹果',
label: '苹果'
}
]
},
{
value: 'diannao',
label: '电脑',
children: [
{
value: '华硕',
label: '华硕'
},
{
value: '天选',
label: '天选'
}
]
}
]

相关问题

在js中给定一个数组[ { bigName: 'shouji', smallName: '华为' }, { bigName: 'shouji', smallName: '苹果' }, { bigName: '电脑', smallName: '华硕' }, { bigName: '电脑', smallName: '天选' }, ]封装一个方法实现el-cascader的数据结构

可以先对数组进行排序，按照 bigName 和 smallName 的顺序，然后再遍历数组生成对应的数据结构。

代码实现如下：

function generateCascaderData(data) {
  // 先按照 bigName 和 smallName 排序
  data.sort((a, b) => {
    if (a.bigName === b.bigName) {
      return a.smallName.localeCompare(b.smallName);
    }
    return a.bigName.localeCompare(b.bigName);
  });

  let cascaderData = [];
  let bigObj = null;
  let smallArr = null;

  // 遍历数组生成数据结构
  for (let i = 0; i < data.length; i++) {
    let item = data[i];
    if (!bigObj || bigObj.label !== item.bigName) {
      bigObj = {
        label: item.bigName,
        value: item.bigName,
        children: []
      };
      cascaderData.push(bigObj);
      smallArr = bigObj.children;
    }
    if (smallArr && !smallArr.some(small => small.label === item.smallName)) {
      smallArr.push({
        label: item.smallName,
        value: item.smallName
      });
    }
  }

  return cascaderData;
}

使用方式：

const data = [
  { bigName: 'shouji', smallName: '华为' },
  { bigName: 'shouji', smallName: '苹果' },
  { bigName: '电脑', smallName: '华硕' },
  { bigName: '电脑', smallName: '天选' },
];

const cascaderData = generateCascaderData(data);
console.log(cascaderData);

输出结果：

[
  {
    label: '电脑',
    value: '电脑',
    children: [
      { label: '华硕', value: '华硕' },
      { label: '天选', value: '天选' }
    ]
  },
  {
    label: 'shouji',
    value: 'shouji',
    children: [
      { label: '华为', value: '华为' },
      { label: '苹果', value: '苹果' }
    ]
  }
]