前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >element 的 Cascader 级联选择器设定默认值

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

原创
作者头像
wuxiexy
修改2020-05-25 17:27:51
5.5K0
修改2020-05-25 17:27:51
举报

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

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 测试代码
  • options
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档