發現在很多的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），因為什么呢？！因為什么呢？！因為什么呢？！因為后端大大是不會再幫你整合結構的，除非一開始他給你的結構就是對稱的。
聲明：嚴禁抄襲，歡迎轉載！不過請帶上博文鏈接！
或者你有更好的實現方式、或者你覺得有可以優化的地方，不妨評論討論下！覺得得到幫助的可以點個推薦，讓更多人也可以得到幫助。