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),因为什么呢?!因为什么呢?!因为什么呢?!因为后端大大是不会再帮你整合结构的,除非一开始他给你的结构就是对称的。

声明:严禁抄袭,欢迎转载!不过请带上博文链接!

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

element 的 Cascader 级联选择器设定默认值的更多相关文章

  1. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  2. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  3. 记录一下使用element ui使用级联选择器的坑,级联选择器的默认选中

    Cascader 级联选择器 使用级联选择器我使用的是默认选中值 下面是我的数据格式,只是形式相同,值不同, 后台的数据是这样的不是ID //级联选择器 <el-cascader :props= ...

  4. element UI select 设定默认值

    要为select设定默认值,有两个步骤 1.数据中,声明一个变量param:该变量的值设为你想设定的select option中value 2.控件的 v-model 绑定 param 即可 < ...

  5. Cascader 级联选择器

    当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...

  6. ElementUI 之 Cascader 级联选择器指定 value label

    ElementUI 的 Cascader 级联选择器个人觉得很好用,但是对 :options="options" 里的数据格式是有特定要求的:input 框显示的值是 option ...

  7. Entity Framework 6 Recipes 2nd Edition(12-7)译 -&gt; 设定默认值

    12-7. 设定默认值 问题 在把一个实体保存到数据库之前,设置该实体属性的默认值 解决方案 假设你有一个如Figure 12-9所示的表, 它保存采购订单(purchase order). 主键Pu ...

  8. easyui的combobox将得到的数据设定为下拉框默认值和复选框设定默认值

    通过easyui做了一个表,表里是从数据库拿到的数据. 现在双击某一行,通过点击行的id取到这一行的所有数据,现在需要修改这些得到的数据, 其中部分数据是<select>这个选择的, 问题 ...

  9. ElementUI组件Cascader级联选择器数据后台处理

    Cascader级联选择器数据数据格式不知道的可以去官网看下:这里我就不表示什么了. 部门实体类: import lombok.Data; @Data public class Department ...

随机推荐

  1. IE11之F12 Developer Tools--概述篇

    打开Developer Tools的方法: a. 点击F12 b. 在浏览器中选择Tools-->F12 Develooper Tools 打开后图示: 从上图我们可以看到,Developer ...

  2. iOS原生地图开发详解

    在上一篇博客中:http://my.oschina.net/u/2340880/blog/414760.对iOS中的定位服务进行了详细的介绍与参数说明,在开发中,地位服务往往与地图框架结合使用,这篇博 ...

  3. java笔记--关于线程同步(5种同步方式)【转】

    为何要使用同步?     java允许多线程并发控制,当多个线程同时操作一个可共享的资源变量时(如数据的增删改查),      将会导致数据不准确,相互之间产生冲突,因此加入同步锁以避免在该线程没有完 ...

  4. wordpress代理设置

    打开wp-config.php,在页首加上以下语句: define('WP_PROXY_HOST', '192.168.84.101'); define('WP_PROXY_PORT', '8080' ...

  5. clock_t与time_t的区别及联系

    clock_t <ctime> Clock type Type capable of representing clock tick counts and support arithmet ...

  6. 音乐TV2015校园招聘A第二大发行量(对中国科学院大学站)

    标题叙述性说明:鉴于阵列A,尺寸n,数组元素1至n数位,但是,一些数字多次出现,有些数字不出现.请设计算法和程序.统计数据不会出现什么.什么号码多次出现. 您可以O(n)时间复杂度,O(1)求下完毕么 ...

  7. hdu4417 Super Mario

    Problem Description Mario is world-famous plumber. His “burly” figure and amazing jumping ability re ...

  8. 运用了css,js

    代码如下: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/html"><head> &l ...

  9. Xilinx 7 series FPGA multiboot技术的使用(转)

    reference:https://www.cnblogs.com/chensimin1990/p/9067629.html 当升级程序有错误的时候,系统会启动golden bitstream 注意: ...

  10. 优化EF Code First第一次请求速度

    由于EF Code First模式没有模型文件,所以很多一次请求的时候速度比较慢,EF需要将对应的数据库映射关系加载到内存里面,往后请求就比较快.可以通过在程序初始化的时候增加一段代码来优化EF第一次 ...