发现在很多的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），因为什么呢？！因为什么呢？！因为什么呢？！因为后端大大是不会再帮你整合结构的，除非一开始他给你的结构就是对称的。
声明：严禁抄袭，欢迎转载！不过请带上博文链接！
或者你有更好的实现方式、或者你觉得有可以优化的地方，不妨评论讨论下！觉得得到帮助的可以点个推荐，让更多人也可以得到帮助。