VueJS Element UI自定義控件：Cascader級聯下拉框，解決查看時樹形數據回顯

下拉框在業務開發中還是很常用的，比如下拉菜單，上級組織機構選擇，各種分類等等。在用到Element UI的Cascader 級聯選擇器下拉框組件時，不能滿足我的需求，就在此基礎上自定義了控件。

存在的問題：

1、Element UI官方的級聯下拉控件el-cascader選擇數據後，被選中的數據是數組形式的，例如：[7,6,1]，但在數據庫中保存時，一般只保存ID，不保存數組。所以就需要我們自己處理。

 

2、查看頁面時又需要回顯選擇的上級菜單，所以需要根據保存的ID查找到它所有上級，才能正常顯示。官方組件沒有自帶這個功能。

下面是基於官方組件自定義封裝的組件，解決了上面兩個問題。你只要新建一個Cascade.Vue的文件，把下面的內容全部拷貝進去就行了。

<template>
    <div>
        <el-cascader style="width: 100%" :clearable="clearable"
                     :options="options" :placeholder=placeholder
                     :props="prop