element 的 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 级联选择器设定默认值的更多相关文章
- element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)
来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- 记录一下使用element ui使用级联选择器的坑,级联选择器的默认选中
Cascader 级联选择器 使用级联选择器我使用的是默认选中值 下面是我的数据格式,只是形式相同,值不同, 后台的数据是这样的不是ID //级联选择器 <el-cascader :props= ...
- element UI select 设定默认值
要为select设定默认值,有两个步骤 1.数据中,声明一个变量param:该变量的值设为你想设定的select option中value 2.控件的 v-model 绑定 param 即可 < ...
- Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...
- ElementUI 之 Cascader 级联选择器指定 value label
ElementUI 的 Cascader 级联选择器个人觉得很好用,但是对 :options="options" 里的数据格式是有特定要求的:input 框显示的值是 option ...
- Entity Framework 6 Recipes 2nd Edition(12-7)译 -> 设定默认值
12-7. 设定默认值 问题 在把一个实体保存到数据库之前,设置该实体属性的默认值 解决方案 假设你有一个如Figure 12-9所示的表, 它保存采购订单(purchase order). 主键Pu ...
- easyui的combobox将得到的数据设定为下拉框默认值和复选框设定默认值
通过easyui做了一个表,表里是从数据库拿到的数据. 现在双击某一行,通过点击行的id取到这一行的所有数据,现在需要修改这些得到的数据, 其中部分数据是<select>这个选择的, 问题 ...
- ElementUI组件Cascader级联选择器数据后台处理
Cascader级联选择器数据数据格式不知道的可以去官网看下:这里我就不表示什么了. 部门实体类: import lombok.Data; @Data public class Department ...
随机推荐
- 解决vue中BMap未定义问题
原文链接: 点我 最近在项目中使用了百度地图来显示物流信息,实现方式有两种: 引用Vue Baidu Map引用BMap存在的问题:\color{red}{存在的问题:}存在的问题::使用BMap可以 ...
- 数学--数论--POJ1365——Prime Land
Description Everybody in the Prime Land is using a prime base number system. In this system, each po ...
- codeforce 266c Below the Diagonal 矩阵变换 (思维题)
C. Below the Diagonal You are given a square matrix consisting of n rows and n columns. We assume th ...
- docker cannot open directory .: Permission denied无权限问题
docker运行一个容器后,将主机中当前目录下的文件夹挂载到容器的文件夹后 进入到docker容器内对应的挂载目录中,运行命令ls后提示: ls: cannot open directory .: P ...
- C. Fountains
\(整体思路没错,但是我貌似太麻烦了.......\) \(分情况讨论\) \(Ⅰ.coin和diamond各选一个物品,这个简单\) \(Ⅱ.在coin中选两个或者在diamond选两个\) \(开 ...
- Linux查看redis占用内存的方法
redis-cli auth 密码info # Memory used_memory:13490096 //数据占用了多少内存(字节) used_memory_human:12.87M //数据占用了 ...
- Qt数据库总结
使用Qt SQL库 头文件: #include <QtSql> 项目: QT += sql 常用类 QSqlDatabase:数据库的连接打开等操作 QSqlQuery:执行语句,获取结果 ...
- 玩好百家乐需要掌握些什么技巧和打法?来自ag老玩家的实战经验心得总结
最近很多网友给我留言,说为什么学了很多技巧和打法这个游戏还是玩不好,坦白说,其实bjl想要玩得好,不是说你懂得多少技巧和掌握了多少种打法就可以的了,而是你要懂得如何把这些正确结合去运用,这些我之前都强 ...
- Redis学习笔记(二) 链表
链表提供了高效的节点重排能力,以及顺序性的节点访问方式,并且可以通过增删节点来灵活地调整链表的长度. redis中链表应用广泛,如list中就使用了链表. 每一个链表节点使用listNode结构标识( ...
- 用python爬了厦门人才网的.net岗位
为了看看.net的就业行情怎么样,用python爬取了厦门人才网.net岗位的信息,话不多说上代码,python没学多久,如果有什么不妥请指正 import requests from bs4 imp ...