专栏首页wuxiexy的前端分享element 的 Cascader 级联选择器设定默认值
原创

element 的 Cascader 级联选择器设定默认值

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: "组件交互文档"
      }
    ]
  }
]

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 两个超大的数字相减

    wuxiexy
  • 两个超大的数字相加

    wuxiexy
  • 数组扁平化处理

    wuxiexy
  • bootstrap label标签

    <span class="label label-default">默认标签</span> <span class="label label-primary"...

    用户5760343
  • JavaScript时间轮盘:js元素圆形布局制作时间轮盘动画

    前段时间看抖音,有人用时间轮盘作为动态的桌面壁纸,感觉很好玩,于是突发奇想,可以用JS来实现这个功能。

    Javanx
  • input文本框输入时正则判断

    Java帮帮
  • 【Babel】293- 初学 Babel 工作原理

    已经9102了,我们已经能够熟练地使用 es2015+ 的语法。但是对于浏览器来说,可能和它们还不够熟悉,我们得让浏览器理解它们,这就需要 Babel。

    pingan8787
  • 基于价值与风险平衡的全球司库管理实操

    随着人工智能、区块链、云计算、大数据和物联网等新技术的发展,财务管理工作更加趋向自动化、智能化和数字化。企业资金管理也已经从最开始的基础资金管理发展到资金集中管...

    RPA小葵
  • 伺服控制智能助力机械手系统特点和功能分析

    随着现代化工业生产的不断发展,工业机器人得到广泛应用,但受成本和功能限制还不能独立完成所有的物料搬运工作,大量的物料搬运工作仍需要人来完成。如何降低工人的劳动强...

    机器人网
  • 伺服控制智能助力机械手系统功能分析

    随着现代化工业生产的不断发展,工业机器人得到广泛应用,但受成本和功能限制还不能独立完成所有的物料搬运工作,大量的物料搬运工作仍需要人来完成。如何降低工人的劳动强...

    机器人网

扫码关注云+社区

领取腾讯云代金券