递归处理树形数据

直接上代码

1.html

<template>
  <div class="box">
    <div class="block">
      <span class="demonstration">单选可搜索</span>
      <el-cascader
        placeholder="试试搜索：指南"
        :options="options"
        clearable
        :props="{ checkStrictly: true }"
      ></el-cascader>
    </div>
  </div>
</template>

2.js

<script>
export default {
  data() {
    return {
      options: [],
    };
  },
  mounted() {
    this.aa();
    console.log(this.options);
    let gxqTree = this.options.map((org) => this.mapTree(org));
    console.log(gxqTree);
    this.options = gxqTree;
  },
  methods: {
    mapTree(org) {
      const haveChildren =
        Array.isArray(org.children) && org.children.length > 0;
      return {
        value: org.aaa,
        label: org.bbb,
        children: haveChildren ? org.children.map((i) => this.mapTree(i)) : '',
      };
    },

    aa() {
      this.options = [
        {
          aaa: "zhinan",
          bbb: "指南",
          children: [
            {
              aaa: "shejiyuanze",
              bbb: "设计原则",
              children: [
                {
                  aaa: "yizhi",
                  bbb: "一致",
                },
                {
                  aaa: "fankui",
                  bbb: "反馈",
                },
                {
                  aaa: "xiaolv",
                  bbb: "效率",
                },
                {
                  aaa: "kekong",
                  bbb: "可控",
                },
              ],
            },
            {
              aaa: "daohang",
              bbb: "导航",
              children: [
                {
                  aaa: "cexiangdaohang",
                  bbb: "侧向导航",
                },
                {
                  aaa: "dingbudaohang",
                  bbb: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          aaa: "zujian",
          bbb: "组件",
          children: [
            {
              aaa: "basic",
              bbb: "Basic",
              children: [
                {
                  aaa: "layout",
                  bbb: "Layout 布局",
                },
                {
                  aaa: "color",
                  bbb: "Color 色彩",
                },
                {
                  aaa: "typography",
                  bbb: "Typography 字体",
                },
                {
                  aaa: "icon",
                  bbb: "Icon 图标",
                },
                {
                  aaa: "button",
                  bbb: "Button 按钮",
                },
              ],
            },
            {
              aaa: "form",
              bbb: "Form",
              children: [
                {
                  aaa: "radio",
                  bbb: "Radio 单选框",
                },
                {
                  aaa: "checkbox",
                  bbb: "Checkbox 多选框",
                },
                {
                  aaa: "input",
                  bbb: "Input 输入框",
                },
                {
                  aaa: "input-number",
                  bbb: "InputNumber 计数器",
                },
                {
                  aaa: "select",
                  bbb: "Select 选择器",
                },
                {
                  aaa: "cascader",
                  bbb: "Cascader 级联选择器",
                },
                {
                  aaa: "switch",
                  bbb: "Switch 开关",
                },
                {
                  aaa: "slider",
                  bbb: "Slider 滑块",
                },
                {
                  aaa: "time-picker",
                  bbb: "TimePicker 时间选择器",
                },
                {
                  aaa: "date-picker",
                  bbb: "DatePicker 日期选择器",
                },
                {
                  aaa: "datetime-picker",
                  bbb: "DateTimePicker 日期时间选择器",
                },
                {
                  aaa: "upload",
                  bbb: "Upload 上传",
                },
                {
                  aaa: "rate",
                  bbb: "Rate 评分",
                },
                {
                  aaa: "form",
                  bbb: "Form 表单",
                },
              ],
            },
            {
              aaa: "data",
              bbb: "Data",
              children: [
                {
                  aaa: "table",
                  bbb: "Table 表格",
                },
                {
                  aaa: "tag",
                  bbb: "Tag 标签",
                },
                {
                  aaa: "progress",
                  bbb: "Progress 进度条",
                },
                {
                  aaa: "tree",
                  bbb: "Tree 树形控件",
                },
                {
                  aaa: "pagination",
                  bbb: "Pagination 分页",
                },
                {
                  aaa: "badge",
                  bbb: "Badge 标记",
                },
              ],
            },
            {
              aaa: "notice",
              bbb: "Notice",
              children: [
                {
                  aaa: "alert",
                  bbb: "Alert 警告",
                },
                {
                  aaa: "loading",
                  bbb: "Loading 加载",
                },
                {
                  aaa: "message",
                  bbb: "Message 消息提示",
                },
                {
                  aaa: "message-box",
                  bbb: "MessageBox 弹框",
                },
                {
                  aaa: "notification",
                  bbb: "Notification 通知",
                },
              ],
            },
            {
              aaa: "navigation",
              bbb: "Navigation",
              children: [
                {
                  aaa: "menu",
                  bbb: "NavMenu 导航菜单",
                },
                {
                  aaa: "tabs",
                  bbb: "Tabs 标签页",
                },
                {
                  aaa: "breadcrumb",
                  bbb: "Breadcrumb 面包屑",
                },
                {
                  aaa: "dropdown",
                  bbb: "Dropdown 下拉菜单",
                },
                {
                  aaa: "steps",
                  bbb: "Steps 步骤条",
                },
              ],
            },
            {
              aaa: "others",
              bbb: "Others",
              children: [
                {
                  aaa: "dialog",
                  bbb: "Dialog 对话框",
                },
                {
                  aaa: "tooltip",
                  bbb: "Tooltip 文字提示",
                },
                {
                  aaa: "popover",
                  bbb: "Popover 弹出框",
                },
                {
                  aaa: "card",
                  bbb: "Card 卡片",
                },
                {
                  aaa: "carousel",
                  bbb: "Carousel 走马灯",
                },
                {
                  aaa: "collapse",
                  bbb: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          aaa: "ziyuan",
          bbb: "资源",
          children: [
            {
              aaa: "axure",
              bbb: "Axure Components",
            },
            {
              aaa: "sketch",
              bbb: "Sketch Templates",
            },
            {
              aaa: "jiaohu",
              bbb: "组件交互文档",
            },
          ],
        },
      ];
    },
  },
};
</script>