Cascader 级联选择器

发现在很多的CRM管理系统里面，都有不少页面是用到这种级联选择器的，确实，功能很实用，

不过要设置默认值则应该让不少人头痛，因为你选择的时候 @change 事件的参数就是选中的值，一个二维数组，这个很简单就获得了。不过要设置默认参数，让 el-cascader 显示默认值的话，就得把后端返回的默认数据，在这个 层级树 里面蹂躏一遍，并找到默认数据的对应位置。

不啰嗦，上代码

function cascader(o, options) {
  let toString = Object.prototype.toString,
    k = Object.keys(o),
    len = options.length,
    res = [];
  let current, v, child, num;
  for (let i = 0; i < len; ) {
    current = options[i++];
    v = current.value;
    child = current.children;
    num = k.indexOf(v);
    if (num > -1) {
      res.push(k.splice(num, 1));
      if (k.length === 0) {
        break;
      }
    }
    if (toString.call(child) === "[object Array]" && child.length > 0) {
      cartwheel([v], child);
    }
  }
  function cartwheel(row, c) {
    let len = c.length;
    let current, v, child, num;
    for (let i = 0; i < len; ) {
      current = c[i++];
      v = current.value;
      child = current.children;
      num = k.indexOf(v);
      if (num > -1) {
        res.push([...row, ...k.splice(num, 1)]);
        if (k.length === 0) {
          return;
        }
      }
      if (toString.call(child) === "[object Array]" && child.length > 0) {
        cartwheel([...row, v], child);
      }
    }
    return;
  }
  return res;
}

测试代码

let o = {
  zhinan: "指南",
  daohang: "导航",
  ziyuan: "资源",
  shejiyuanze: "设计原则",
  yizhi: "一致",
  sketch: "sketch",
  jiaohu: "组件交互文档",
  breadcrumb: "Breadcrumb 面包屑",
  "message-box": "MessageBox 弹框",
  cexiangdaohang: "侧向导航",
  dingbudaohang: "顶部导航"
};
let res = cascader(o, options);

options 主要是 Cascader 级联选择器 那边贴过来的，这里也贴一下，

options

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

测试是可以的，但是如果要用在项目的里面的话，是不能直接用的，除非你的 层级树 和上面这个 options的结构是一致的。如果不一致的话，那就要你手动改下 cascader 方法里面的取值了（如：value，children），因为什么呢？！因为什么呢？！因为什么呢？！因为后端大大是不会再帮你整合结构的，除非一开始他给你的结构就是对称的。

声明：严禁抄袭，欢迎转载！不过请带上博文链接！

或者你有更好的实现方式、或者你觉得有可以优化的地方，不妨评论讨论下！觉得得到帮助的可以点个推荐，让更多人也可以得到帮助。