将一个树形结构的数据平铺成一个一维数组(vue3)

一、需求描述

由于自带组件库没有具体完善，无法实现像element-ui这种可以多选选择任意一级的选项，也就是说，选择父级的时候不会联动选择子级的全部
例如：

所以，才会出现【二、案例场景】类似的场景，可以用来多选 ，并可以实现单选父级而不关联子级，选择了将树状数据进行平铺，并且可以分类，为了实现这个，可是绞尽脑汁呀

二、案例场景

将一个树形结构的数据平铺成一个一维数组，并以 parentName - currentName展示，类似第一级-第二级-第三级-第四级 展示

三、实现案例展示

由

转变为

四、代码展示

采用递归方式去格式化数据

级联数据【现成组件，可以直接使用】-格式化接口数据，转换为 lable,value,children的格式

/**
 * 格式化分类列表
 * 将原始数据格式化为级联选择器可以识别的数据格式
 * @param {CategoryOptionsType[]} categoryOptions 分类列表
 * @return {CategoryOptionsType[]} 返回格式化后的分类列表
 */
export const fomatterCategoryList = (categoryOptions: CategoryOptionsType[]) => {
  // 遍历分类列表
  categoryOptions?.forEach((item: CategoryOp